如果是原生的输入,使用@keyup.enter就可以,若是使用了element-ui,则要加上本地限制符,因为element-ui把输入进行了封装,原事件就不起作用了,代码如下:
& lt;输入v模型=癴orm.name”占位符=瓣浅啤癅keyup.enter=疤峤弧北?
& lt; el-input v模型=癴orm.name”占位符=瓣浅啤癅keyup.enter.native=疤峤弧弊４? lt;/el-input>
现在发现这个键盘事件好像对输入框支持比较好,其他的元素多少会有点问题,或者直接无效,究其原因是其他的元素没有获取焦点或者没有键盘事件。
我现在的解决方式,
如果是没有键盘事件使用css把输入框绝对定位到需要绑定键盘事件的元素之上并且把输入框设置为透明,把该输入框与原来要绑定键盘事件的元素进行绑定,达到效果;
& lt; div类="容器"比;
& lt;输入类="项opa " @keyup=癲eleteDiv”比;
& lt; div类="项目"在div内容& lt;/div>
& lt;跨度点击=" DeleteDiv "祝辞X
& lt;/div>
div.container {
位置:相对;
}
.item {
位置:绝对的;
上图:0;
左:0;
宽度:100 px;
身高:100 px;
边界:1 px固体# ccc;
}
.opa {
透明度:0;
z - index: 5;
}
跨度{
位置:绝对的;
上图:5 px;
右:5 px;
z - index: 10;
}
方法:{
deleteDiv () {
警报(“删除”);
}
}
如果是没有获取焦点,则可以写一个自定义指令自动获取焦点,
自动获取焦点自定义指令见我另一篇文章<强>点击进入
<>强如下所示:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> & lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {
var vm=new Vue ({
埃尔:“#箱”,
方法:{
显示:函数(ev) {
如果(ev)。键码==13){
alert('你按回车键了');
}
},
}
});
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt;输入类型=拔谋尽闭嘉环?扒胧淙搿癅keyup=跋允?事件)美元”比;
& lt;输入类型=拔谋尽闭嘉环?扒胧淙搿癅keyup.13=跋允?事件)美元”比;
& lt;/div>
& lt;/body>
& lt;/html>
当按下键盘的时候,执行显示方法,然后再去执行相应的业务。
两个输入的效果都是一样的如果安13也就是按键输入才会执行弹窗! !
以上这篇对vue键盘回车事件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
