vue使用element-ui的el-input监听不了回车事件解决

港控/mmm° 2021-09-14 14:58 317阅读 0赞

转自：http://blog.csdn.net/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标签添加键盘事件***

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.      **<****title****>****</****title****>**  
5.      **<****meta** charset="utf-8"**>**  
6.      **<****script** src="vue.js"**>****</****script****>**  
7.    
8.      **<****script** type="text/javascript"**>**  
9.          window.onload = function()\{  
10.             var vm = new Vue(\{  
11.                 el:'\#box',  
12.                 methods:\{  
13.                     show:function(ev)\{  
14.                         if(ev.keyCode == 13)\{  
15.                             alert('你按回车键了');  
16.                         \}  
17.                     \},  
18.                 \}  
19.             \});  
20.         \}  
21.     **</****script****>**  
22. **</****head****>**  
23. **<****body****>**  
24.     **<****div** id="box"**>**  
25.         **<****input** type="text" placeholder="请输入" @keyup="show($event)"**>**   
26.   
27.         **<****input** type="text" placeholder="请输入" @keyup.13="show($event)"**>**  
28.     **</****div****>**  
29. **</****body****>**  
30. **</****html****>**

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

**两个input的效果都是一样的 如果按13  也就是按键 enter 才会执行弹窗！！  
@keyup.13 回车  
@keyup.enter 回车  
@keyup.left 左键  
@keyup.right 右键  
@keyup.up 上键  
@keyup.down 下键  
@keyup.delete 删除键**

**原文链接：[http://www.cnblogs.com/zycbloger/p/6423132.html][http_www.cnblogs.com_zycbloger_p_6423132.html]**

[http_www.cnblogs.com_zycbloger_p_6423132.html]: http://www.cnblogs.com/zycbloger/p/6423132.html