一、前言

input组件是我们常用的组件了，大家也很熟悉。

在实际开发过程中，我们经常要对input的输入做出限制，防止一些额外的输入引发连锁的bug。

比如说限制只能输入数字，方法有很多，当年的我年少无知，只能寻求度娘的帮助，就拿到了以下这串代码。

onkeyup="this.value=this.value.replace(/[^\d]/g,'');"

onkeyup严格来说是一种释放键盘（键盘松开）的事件，适用于所有HTML元素。

并不是input组件的专属官方绑定事件，但也能用凑合凑合。

原理上就是用键盘检测事件，然后根据正则表达式，来修改变量的值。

而且就一行代码，方便好使。（我原本以为是这样的，结果被辜负了）

二、过程

将onkeyup绑定到input组件上后，输入效果上有一点偏差，就你会看到这样的情况：

你输入了一个字母，字母会一闪而过，被onkeyup事件捕捉到，从而修改对应的变量，将字母剔除掉。

如果只是一闪而过就也还行，至少功能上我们是达到了，但坏就坏在这里，一旦多尝试几次后，可能就没被onkeyup读取或者说变量失去了响应式，明明input框里你看到的是12，可实际变量却是12a，接口参数也是12a，这bug就来了。

又隐晦，又不是每次稳定触发的bug，开发过程中很难发现（主要是我菜），只能捅到测试那边，又挨一顿批。

既然onkeyup不行，那我就看看el-input的官方绑定事件。

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string or number)
input	在 Input 值改变时触发	(value: string or number)
clear	在点击由 `clearable` 属性生成的清空按钮时触发	—

看了一圈下来，感觉就change或者input事件可以满足我的要求。

本文选用的是input事件，change事件没太测试过，因为这个限制条件，也有可能存在没触发的情况，所以就没用到。

v-model="params.num"
:input="changeMileData('num')"

绑定了函数之后，我们在函数里用replace函数+正则表达式进行字符串的替换。

 // 格式化
changeMileData(str) {
  this.params[str] = this.params[str].replace(/[^\d]/g, '')
},

选用input事件后，基本上没再出现过显示和实际参数不一致的情况了，同时也不会有一闪而过的字母，（onkeyup事件会有，比较影响用户体验），果然官方的就是方便好使。

上面这个是单个input的情况，项目里用到input的情况一般比较多，建议是做成公共的函数部分，将变量名、正则表达式都作为参数抽离出来，适配每个input的不同限制条件，方便管理。

不然就得每个input框都要写一次函数了，费时费力，关键是如果后续要修改，还得每个文件每个函数的去改。（这点我深有体会，所以现在开发项目，基本上都会有意识的将公共部分抽离出来，统一维护，也方便修改）

ps: 我是地霊殿__三無，希望能帮到你。