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

最新推荐文章于 2025-06-26 15:22:25 发布

qq_39985511

最新推荐文章于 2025-06-26 15:22:25 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue element-ui el-input 键盘事件

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了解决Vue结合Element UI时，el-input组件无法直接监听回车事件的问题，并提供了添加.native修饰符的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 
  <!DOCTYPE html>  
 <html>  
 <head>  
     <title></title>  
     <meta charset="utf-8">  
     <script src="vue.js"></script>  
   
     <script type="text/javascript">  
         window.onload = function(){  
             var vm = new Vue({  
                 el:'#box',  
                 methods:{  
                     show:function(ev){  
                         if(ev.keyCode == 13){  
                             alert('你按回车键了');  
                         }  
                     },  
                 }  
             });  
         }  
     </script>  
 </head>  
 <body>  
     <div id="box">  
         <input type="text" placeholder="请输入" @keyup="show($event)">   
   
         <input type="text" placeholder="请输入" @keyup.13="show($event)">  
     </div>  
 </body>  
 </html>  
 