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

Keywords: Vue Javascript

From: http://blog.csdn.net/u014520745/article/details/71746343

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>  
  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('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)">   
  26.   
  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.up
@keyup.down
@keyup.delete delete

Original link: http://www.cnblogs.com/zycbloger/p/6423132.html

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

Hot Keywords

©2024 Programmer Group