vue限制只能输入数字_浅谈vue限制文本框输入数字的正确姿势

最近遇到一个需求，需要限制文本框输入数字，而number类型的输入框有箭头，个人不是很喜欢，因此想要寻求其它途径实现。本想通过网上找个现成的插件，然而百度，谷歌一番都没有找到满意的答案，至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手，丰衣足食。

事件选型

首先我们很容易想到通过事件来达到目的，大致可以通过以下几个事件来实现：

keypress/keydown

思路：按键按下的时候触发，通过判断按下的是否是数字返回true/false来限制用户的输入。

缺点：无法限制用户复制粘贴的数据。

keyup

思路：同keypress事件，区别在于按键摁下弹起的时候触发。

缺点：从界面上看有个回退(显示用户输入的 不合法字符之后删除回退)的现象，不是很自然。

input

思路：用户输入的时候触发

优点：可以在用户复制粘贴的时候获取到完整的值，同时不会有界面回退的现象。

初步实现

综合各种方案的优缺点，选定input事件来实现，首先我们来实现最简单的限制用户只能输入正整数。代码如下：

但是，此方法有的时候没有很好地达到预期效果，这边我放到最后再来讲。

封装成指令

通过自定义指令来增加相应DOM的特性，使其支持文本输入限制。

function onInput(el, ele, binding, vnode) {

function handle() {

// 只保留数字

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)

使用方法：

支持浮点数

我们知道v-model指令有三种修饰符lazy,  number, trim实现了不同的功能，这边呢，也想通过v-number-input.float的方式达到支持浮点数的目的 。

修改handle回调，增加浮点数的支持

function handle() {

+ let val = ele.value

+ // modifiers为修饰符对象，传入了float，则其float属性为true

+