VUE中實現輸入框Input輸入限制

在開發過程當中，基本都遇到過須要限制輸入的狀況，好比金額、僅字母數字、可輸入小數位等，網上搜了不少方法也遇到一些坑，因此分享出來。

1.使用修飾符實現數字輸入

在VUE中能夠在v-modal後添加修飾符的形式來限制輸入，好比：

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

.number能夠實現限制數字輸入，可是會有如下問題：

• 會出現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

這裏的修飾符也沒法實現定製限制輸入，不能知足要求

2.監聽輸入框變化

經過@input監聽更新數據，實現只能輸入數字，並且能夠自行定製限制輸入內容

<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+/, '')
  })
}

// 限制只能輸入整數和小數（價格類、最多兩位小數）
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 = ''
    }
  })
}

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
      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>

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

好比輸入abc、123abc輸入框內是 、123，但實際testValue值是c、123c。

緣由是vue中綁定的值是經過監聽input進行賦值的，直接修改輸入框值不會觸發input事件，須要經過dispatchEvent再次手動觸發input事件，修改以下:

//input.js

···

// 防抖
let debounce = (fn, delay) => {
  var delay = delay || 100;
  var timer;
  return function() {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
}

···

// 限制只能輸入整數和小數（價格類、兩位小數）
const priceFilter = function(el) {
  addListener(el, 'input', debounce(() => {//添加防抖 防止反覆觸發事件致使內存溢出
    el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
    if (isNaN(el.value)) {
      el.value = ''
    }
    //觸發input事件
    el.dispatchEvent(new Event('input'))
  }))
}

···

到這裏算是知足了要求，也能方便的使用，分享出來但願可以拋磚引玉，學習到更好的方式，若是有更好的方法請告訴我，謝謝！