对vue 键盘回车事件的实例讲解

2019-11-19 13:09:45

字体：大中小

来源：转载

供稿：网友

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit"><el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

现在发现这个键盘事件好像对input框支持比较好，其他的元素多少会有点问题，或者直接无效，究其原因是其他的元素没有获取焦点或者没有键盘事件。

我现在的解决方式，

如果是没有键盘事件使用css把input框绝对定位到需要绑定键盘事件的元素之上并且把input框设置为透明，把该input框与原来要绑定键盘事件的元素进行绑定，达到效果；

test.vue

<div class="container"> <input class="item opa" @keyup="deleteDiv"> <div class="item">div内容</div> <span click="DeleteDiv">X</span></div>

css：

div.container{ position:relative;}.item{ position:absolute; top:0; left:0; width:100px; height:100px; border:1px solid #ccc;}.opa{ opacity:0; z-index:5;}span{ position:absolute; top:5px; right:5px; z-index:10;}

js：

methods:{ deleteDiv(){ alert("delete"); }}

如果是没有获取焦点，则可以写一个自定义指令自动获取焦点，

自动获取焦点自定义指令见我另一篇文章 点击进入

拓展知识：vuejs 2.0 键盘事件详解

如下所示：

<!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>

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

两个input的效果都是一样的如果安13 也就是按键 enter 才会执行弹窗！！

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

以上这篇对vue 键盘回车事件的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

下一篇：vue点击input弹出带搜索键盘并监听该元素的方法