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

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

专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业简阳免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。


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

我现在的解决方式,

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

test.vue

div内容
X

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 键盘事件详解

如下所示:




 
 
 

 


 

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

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

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

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


当前名称:对vue键盘回车事件的实例讲解
标题网址:http://myzitong.com/article/gejseo.html