vue监听回车键,vue监听输入框
本文主要介绍vue监听键盘事件的总结，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
按键修饰符
在监控键盘事件时，我们经常需要检查详细的按键。Vue允许在监听键盘事件时为v-on添加按键修饰符：
！-仅在输入“key”时调用“vm.submit()”
输入v-on:keyup.enter=submit
可以直接将KeyboardEvent.key公开的任何有效的键名转换成kebab-case作为修饰符。
输入v-on:keyup . page-down= on pagedown
为了在必要时支持旧浏览器，Vue为最常用的键码提供了别名：
-输入
-标签
-删除(捕捉“删除”和“退格”键)
- esc
-空间
-起来
-趴下
-左边
-没错
您还可以通过全局config.keyCodes对象自定义键修饰符别名：
//可以使用` v-on: keyup.f1`。
Vue.config.keyCodes.f1=112
系统修饰键
您可以使用以下修饰符来实现一个侦听器，该侦听器仅在相应的键被按下时触发鼠标或键盘事件。
- .计算机的ctrl按键
- .中高音
- .变化
- .自指的
做某事
与键别名不同，当修饰键与keyup事件一起使用时，在引发事件时必须按下normal键。换个说法：如果要触发keyup.ctrl，必须按住ctrl，释放其他键；单独释放ctrl不会引发事件。
！-按Alt释放C来触发-
input @keyup.alt.67=clear
！-按Alt键释放任意键来触发-
input @keyup.alt=other ！-按下Ctrl enter时触发-input @ keydown.ctrl.13= submit
对于elementUI的输入，我们需要添加。之后是native，因为elementUI封装了输入，native事件不起作用。
输入-model= form . name placeholder= nickname @ keyup . enter= submit
El-input v-model= form . name placeholder= nickname @ key up . enter . native= submit /El-input
.exact修饰符
的。精确修饰符允许您控制由系统修饰符的精确组合触发的事件。
！-即使Alt或Shift同时按下，也会触发-
按钮v-on:click . ctrl= onClick a/button
！-是的，只有在按下Ctrl键时才会触发-
按钮v-on:click . ctrl . exact= onctrl click a/button
！-仅在未按下系统修饰键时触发-
按钮v-on:click . exact= onClick a/按钮
鼠标按钮修饰符
。左边的。正确。中间
这些修饰符将处理函数限制为只响应特定的鼠标按钮。
系统按键组合
如果我们想要监控全局的键操作方法，显然，不可能将它们绑定到页面元素上。
我们可以在坐骑上收听：
已安装(){
document . onkeydown=function(event){
let key=window . event . key code；
if (key===65 event.ctrlKey) {
//监听ctrl键组合
window . event . prevent default()；//关闭浏览器默认快捷键
Console.log(crtl a组合键)
} else if(key===83 event . ctrl key){
window . event . prevent default()；//关闭浏览器快捷键
Console.log(“保存”)；
}
}
}
从上面的例子可以看出，shift、Control、Alt在JS中也可以用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event.altKey”来代替。
附录-键盘按钮keyCode表
以上是vue监控键盘事件相关汇总的详细内容。更多关于vue监听键盘事件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。