转自:/u014520745/article/details/71746343
仅用于学习,不可商用!!!
vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的:
<el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input>
1
解决方法需要在事件后面加上.native
<el-input v-model="form.loginName" placeholder="账号" @keyup.enter.native="doLogin"></el-input>
正常的自己写的input标签添加键盘事件
<!DOCTYPEhtml> <html> <head> <title></title> <metacharset="utf-8"> <scriptsrc="vue.js"></script> <scripttype="text/javascript"> window.onload=function(){ varvm=newVue({ el:'#box', methods:{ show:function(ev){ if(ev.keyCode==13){ alert('你按回车键了'); } }, } }); } </script> </head> <body> <divid="box"> <inputtype="text"placeholder="请输入"@keyup="show($event)"> <inputtype="text"placeholder="请输入"@keyup.13="show($event)"> </div> </body> </html> 当按下键盘的时候,执行show方法,然后再去执行相应的业务。
两个input的效果都是一样的 如果按13 也就是按键 enter 才会执行弹窗!! @keyup.13 回车 @keyup.enter 回车 @keyup.left 左键 @keyup.right 右键 @keyup.up 上键 @keyup.down 下键 @keyup.delete 删除键
原文链接:/zycbloger/p/6423132.html