对vue 键盘回车事件的实例讲解
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇对vue 键盘回车事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
如果是原生的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 键盘回车事件的实例讲解就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。