键盘事件介绍——onKeyPress-输入字母和数字、onKeyUp-放开任何按键、onKeyDown-按下任何按键 el-input 只能输入正整数验证并限制长度

键盘事件介绍——onKeyPress-输入字母和数字、onKeyUp-放开任何按键、onKeyDown-按下任何按键 & el-input 只能输入正整数验证并限制长度

1、onKeyPress-输入中

在用户按下并放开任何字母数字键时发生，并不是每个按键都会触发这个事件。系统按钮（例如：箭头键和功能键）无法得到识别。

2、onKeyUp-输入后

在用户放开任何先前按下的键盘键时发生。 onKeyUp 是所有按键都弹起时被调用，调用的次数是按键的个数。

3、onKeyDown-输入前

在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。、

4、示例

<input type="text"onkeydown = "console.log('onkeydown')"onkeyup="console.log('onkeyup')"onkeypress="console.log('onkeypress')">

运行结果在控制台输出，我们来测试一下

1、当只输入一个字符的时候

2、多个字符同时输入，也就是中间没有停顿，上一个字符还未弹起时输入下一个字符。

5、总结

通过 onKeyDown 事件可以改变用户是按了哪个键，而 onKeyPress 事件则是在输入流进入系统后触发的，但输入流暂未被系统处理，此时已经不能改变输入流了，onKeyUp 则是输入流被系统处理后发生的。

6、实例

6.1、el-input 只能输入数字

输入框中限制通常有三种处理方法

第一种：设置type属性（不推荐）

设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现

<el-input  type="number"></el-input>

第二种：在属性中添加onkeyup或者oninput进行正则判断

onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以这样使用.

字母e在js中属于数字，所以一般的正则匹配 \d 是拦不住字母e 的

<el-input v-model="form" onkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>

<el-input v-model="form" οninput="value=value.replace(/[^0-9.]/g,'')"
</el-input>

参考写法

<el-input onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
</el-input>

以上写法在谷歌以及最新版本火狐浏览器中没问题，但是较旧版本中的火狐浏览器中会发现无法输入任何字符，属于兼容性bug吧。

可以选用以下写法，通过正则匹配非数字的全部置为空，限制输入字符大小，也可以拦住字母e:

<input  type="text" oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');"  >

第三种：通过监听事件监听，对于一些特殊要求的输入框可以采用此方法

当输入完毕后检查整段输入值的规则是否符合，如果不符合就设置为空。

因为不知道用户中途会不会输入英文字母，汉字，特殊字符等等不规则字符。

采用第二种方法就会难以判断字符的格式，最后用户确认时说不定会报错。

以手机号码为例（其他格式都一样，都只是换一下正则表达式罢了）

<el-inputv-model="form.telephone"placeholder="请输入11位手机号"@change="confirmTelephone">
</el-input>
<script>methods:{confirmTelephone() {if (!/^1[0-9]{10}$/.test(this.form.telephone))this.form.telephone = '';},}
</script>

elementUI中el-input输入数字且保留指定小数位

<el-input type="text" placeholder="请输入保留一位小数的数字" class="user-input user-name" v-model="userValue" oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" ></el-input>

6.2、输入框只能输入正整数

<template><div class="app"><!-- 添加@input事件 --><el-input v-model="num" type="text" @input="changeInput" /></div>
</template>
<script>
export default {data() {return {num: ''}},methods: {changeInput() {var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式// 不符合正整数时if (!pattern.test(this.num)) {// input 框绑定的内容为空this.num = ''}}}
}
</script>