vue can't use El input of element UI to monitor the carriage return event

Keywords: Vue Javascript


Only for learning, not for business!!!

vue can't use El input of element UI to listen to the carriage return event. The reason is that the original event is hidden after the element UI itself encapsulates a layer of input tag. Therefore, the following code runs unresponsive:

<el-input v-model="form.loginName" placeholder="Account number" @keyup.enter="doLogin"></el-input>
  • 1

The solution needs to add. native after the event

<el-input v-model="form.loginName" placeholder="Account number" @keyup.enter.native="doLogin"></el-input>

Add keyboard events to normal input tags written by yourself

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8">  
  6.     <script src="vue.js"></script>  
  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('You press enter');  
  16.                         }  
  17.                     },  
  18.                 }  
  19.             });  
  20.         }  
  21.     </script>  
  22. </head>  
  23. <body>  
  24.     <div id="box">  
  25.         <input type="text" placeholder="Please enter" @keyup="show($event)">   
  27.         <input type="text" placeholder="Please enter" @keyup.13="show($event)">  
  28.     </div>  
  29. </body>  
  30. </html>  
When pressing the keyboard, execute the show method, and then execute the corresponding business.

The effect of both input s is the same. If you press the 13 key, enter will pop up!!
@keyup.13 enter
@keyup.enter enter enter
@keyup.left left
@Right key
@keyup.delete delete

Original link:

Posted by johlwiler on Thu, 30 Apr 2020 17:33:46 -0700