最近遇到一個(gè)需求，需要限制文本框輸入數(shù)字，而number類型的輸入框有箭頭，個(gè)人不是很喜歡，因此想要尋求其它途徑實(shí)現(xiàn)。本想通過網(wǎng)上找個(gè)現(xiàn)成的插件，然而百度，谷歌一番都沒有找到滿意的答案，至于隨手一搜出來的方案或多或少都有點(diǎn)缺陷。因此自己動(dòng)手，豐衣足食。

事件選型

首先我們很容易想到通過事件來達(dá)到目的，大致可以通過以下幾個(gè)事件來實(shí)現(xiàn)：

思路：按鍵按下的時(shí)候觸發(fā)，通過判斷按下的是否是數(shù)字返回true/false來限制用戶的輸入。
缺點(diǎn)：無法限制用戶復(fù)制粘貼的數(shù)據(jù)。

思路：同keypress事件，區(qū)別在于按鍵摁下彈起的時(shí)候觸發(fā)。
缺點(diǎn)：從界面上看有個(gè)回退（顯示用戶輸入的 不合法字符之后刪除回退）的現(xiàn)象，不是很自然。

思路：用戶輸入的時(shí)候觸發(fā)
優(yōu)點(diǎn)：可以在用戶復(fù)制粘貼的時(shí)候獲取到完整的值，同時(shí)不會(huì)有界面回退的現(xiàn)象。

初步實(shí)現(xiàn)

綜合各種方案的優(yōu)缺點(diǎn)，選定input事件來實(shí)現(xiàn)，首先我們來實(shí)現(xiàn)最簡單的限制用戶只能輸入正整數(shù)。代碼如下：

<el-input v-model="model" oninput="value=value.replace(/[^/d]/g, '')" />

但是，此方法有的時(shí)候沒有很好地達(dá)到預(yù)期效果，這邊我放到最后再來講。

封裝成指令

通過自定義指令來增加相應(yīng)DOM的特性，使其支持文本輸入限制。

function onInput(el, ele, binding, vnode) { function handle() { // 只保留數(shù)字 ele.value = ele.value.replace(/[^/d]/g, '') }  return handle}const numberInput= { bind(el, binding, vnode) { const ele = el.tagName === 'INPUT' ? el : el.querySelector('input') ele.addEventListener('input', onInput(el, ele, binding, vnode), false) },}Vue.directive('number-input', numberInput)

使用方法：

<el-input v-model="model" v-number-input />

支持浮點(diǎn)數(shù)

我們知道v-model指令有三種修飾符lazy,  number, trim實(shí)現(xiàn)了不同的功能，這邊呢，也想通過v-number-input.float的方式達(dá)到支持浮點(diǎn)數(shù)的目的 。

修改handle回調(diào)，增加浮點(diǎn)數(shù)的支持

function handle() {+ let val = ele.value+ // modifiers為修飾符對象，傳入了float，則其float屬性為true+ if (binding.modifiers.float) {+ // 清除"數(shù)字"和"."以外的字符+ val = val.replace(/[^/d.]/g, '')+ // 只保留第一個(gè), 清除多余的+ val = val.replace(//.{2,}/g, '.')+ // 第一個(gè)字符如果是.號，則補(bǔ)充前綴0+ val = val.replace(/^/./g, '0.')+ } else { val = ele.value.replace(/[^/d]/g, '') } ele.value = val}

使用方法：

<el-input v-model="model" v-number-input.float />