【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符

写在前面

想让输入框只能输入正整数，禁止输入除正整数以外的其他字符，利用禁止按键的方法
在element组件标签上使用键盘事件的时候，需要在事件后面加上.native才能够使用

解决方法

 <el-input-number :disabled="specsVolDisabled" v-model="specsVolNum" :min="0" :max="20" style="width:60px;" controls-position="right" @keyup.native="UpNumber" @keydown.native="UpNumber" @change="handleChange"/>

@keyup.native=“UpNumber” @keydown.native="UpNumber"这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。

在methods里

 handleChange() {

    },
    // 只可输入数字
    UpNumber(e) {
      e.target.value = e.target.value.replace(/[^\d]/g, '')
    },
   // 这段代码是一个函数，用于限制输入框只能输入数字。具体来说，当输入框的值发生变化时，该函数会被调用。
   //函数的参数e代表事件对象，其中包含了输入框的信息。
   //函数的第一行代码会将输入框中非数字的字符替换为空字符串，从而实现了只能输入数字的效果。

首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。

@keyup在element-ui组件中失效。这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@keyup则需要在keyup后面追加native关键词。
在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符，只有Button 组件可以监听 click 事件。

注意！！！如果用了封装组件的话，比如Element-ui，使用按键修饰符需要加上.native。因为Element-ui是封装组件，这个时候使用按键修饰符需要加上.native覆盖原有封装的keyup事件即可，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签。

参考文章

vue和elementui中的键盘事件

比如回车事件是:

@keyup.enter.native=“”

比如按下事件

@keydown.native=“”

当下面不管用的时候加个 .native

@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)

获取按键的键码 e.keyCode

@keyup.13 按回车键

@keyup.enter 回车

@keyup.up 上键

@keyup.down 下键

@keyup.left 左键

@keyup.right 右键

@keyup.delete 删除键

element中的inputNumber计数器

写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
原创不易，期待你的关注与支持~
点赞❤+收藏❤+评论❤
之后我会继续更新前端学习小知识，关注我不迷路~