Vue中實現(xiàn)輸入框Input輸入格式限制

在開發(fā)過程中，基本都遇到過需要限制輸入的情況，比如金額、僅字母數(shù)字、可輸入小數(shù)位等，網(wǎng)上搜了很多方法也遇到一些坑，所以我把自己用的一些方法分享出來，希望對有需要的人有所幫助。

1、使用修飾符實現(xiàn)數(shù)字輸入

在VUE中可以在v-modal后添加修飾符的形式來限制輸入，比如：

<input v-model.number="testValue" type="number">

.number可以實現(xiàn)限制數(shù)字輸入，但是會有以下問題：

會出現(xiàn)type="number"自帶樣式，當然可以通過添加以下css清除

/* 普通IE瀏覽器 樣式清除 */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{  -webkit-appearance: none !important;}/* 火狐瀏覽器樣式清除 */input[type="number"]{  -moz-appearance:textfield;}

可以無限輸入特殊符號+-.，會導致清空data中的值testValue

這里的修飾符也無法實現(xiàn)定制限制輸入，不能滿足要求

2、監(jiān)聽輸入框變化

通過@input監(jiān)聽更新數(shù)據(jù)，實現(xiàn)只能輸入數(shù)字，而且可以自行定制限制輸入內(nèi)容

<input v-model="testValue" @input="testValue = testValue.replace(/[^\d]/g,'')">

此方法可以滿足需求，但是無法封裝進行批量使用。

3、封裝全局指令

封裝input限制輸入指令。

//input.js
const addListener = function(el, type, fn) {  el.addEventListener(type, fn, false)}
//去掉空格const spaceFilter = function(el) {  addListener(el, 'input', () => {    el.value = el.value.replace(/\s+/, '')  })}
// 限制只能輸入整數(shù)和小數(shù)（適用于價格類、最多兩位小數(shù)）const priceFilter = function(el) {  addListener(el, 'input', () => {    el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null    if (isNaN(el.value)) {      el.value = ''    }  })}
// 限制只能輸入字母數(shù)字（適用于運單號）const integerLetterFilter = function(el) {  addListener(el, 'input', () => {    el.value = el.value.replace(/[\W]/g,'')    el.dispatchEvent(new Event('input'))  })}
export default {  bind(el, binding) {    if (el.tagName.toLowerCase() !== 'input') {      el = el.getElementsByTagName('input')[0]    }    spaceFilter(el)    switch (binding.arg) {      case 'price':        priceFilter(el)        break      case 'integerLetter':        integerLetterFilter(el)        break      default:        console.warn('未知指令類型',binding.arg)        break    }  }}

注冊全局自定義指令

//main.js
import inputFilter from '@/directives/InputFilter.js'
vue.directive('inputFilter', inputFilter)

使用v-input-filter指令

<input v-modal="testValue" v-input-filter:price>

這樣封裝在使用時會出現(xiàn)一個隱蔽的bug，就是在輸入指令中正則限制以外的字符時，視圖中輸入框顯示是正確的，但是在瀏覽器控制欄Vue Devtools中的testValue最后一位字符是最后輸入的時的字符。

比如輸入abc、123abc輸入框內(nèi)是 、123，但實際testValue值是c、123c。

原因是vue中綁定的值是通過監(jiān)聽input進行賦值的，直接修改輸入框值不會觸發(fā)input事件，需要通過dispatchEvent再次手動觸發(fā)input事件，但是在監(jiān)聽的input回調(diào)中再觸發(fā)input會無限循環(huán)，所以調(diào)整為監(jiān)聽keyup事件來修改值，修改如下:

//input.js···// 防抖let debounce = (fn, delay) => {var delay = delay || 300;var timer;return function() {var th = this;var args = arguments;if (timer) {      clearTimeout(timer);    }    timer = setTimeout(function() {      timer = null;      fn.apply(th, args);    }, delay);  };}// 限制只能輸入整數(shù)和小數(shù)（適用于價格類、最多兩位小數(shù)）const priceFilter = function(el) {  addListener(el, 'keyup', debounce(() => {//添加防抖 方便添加小數(shù)點    el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || nullif (isNaN(el.value)) {      el.value = ''    }//格式化去掉卻沒有輸入小數(shù)位的小數(shù)點    el.value = +el.value//觸發(fā)input事件    el.dispatchEvent(new Event('input'))  }))}// 限制只能輸入字母數(shù)字（適用于運單號）const integerLetterFilter = function(el) {  addListener(el, 'keyup', () => {    el.value = el.value.replace(/[\W]/g,'')    el.dispatchEvent(new Event('input'))  })}···

本文完?