介绍
如何在vue项目中对键盘事件进行监听?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键.Vue允许为v在监听键盘事件时添加按键修饰符:
& lt; !——,只有在,“关键”,是,“进入”,时调用,“vm.submit()”,——比;
& lt; input v: keyup.enter=皊ubmit"在 你可以直接将KeyboardEvent。关键暴露的任意有效按键名转换为kebab-case来作为修饰符。
& lt; input v: keyup.page-down=皁nPageDown"在 为了在必要的情况下支持旧浏览器,Vue提供了绝大多数常用的按键码的别名:
<李> - enter
<李> - tab
<李> ——删除(捕获“删除”和“退格”键),
<李> - esc
<李> - space
<李> - up
<李> - down
<李> - left
<李> ,
你还可以通过全局配置。键码对象自定义按键修饰符别名:,
//,可以使用,“v: keyup.f1”
Vue.config.keyCodes.f1 112=, 系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器只
<李> - .ctrl
<李> - .alt
<李> - .shift
<李> ——.meta
做
与按键别名不同的是,修饰键和keyup事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发弹起。ctrl,必须按下ctrl时释放其他的按键;单单释放ctrl不会引发事件。
& lt; !——,按下Alt +,释放C触发,——比;
& lt; input @keyup.alt.67=癱lear"祝辞
,
& lt; !——,按下Alt +,释放任意键触发,——比;
& lt; input @keyup.alt=皁ther"祝辞& lt; !——,按下Ctrl +,输入时触发,——祝辞& lt; input @keydown.ctrl.13=皊ubmit"在 对于elementUI的输入,我们需要在后面加上。人,因为elementUI对输入进行了封装,原生的事件不起作用。
& lt; input v模型=癴orm.name",占位符=瓣浅啤?@keyup.enter=皊ubmit"比;
& lt; el-input v模型=癴orm.name",占位符=瓣浅啤?@keyup.enter.native=皊ubmit"祝辞& lt;/el-input> .exact修饰符
.exact修饰符允许你控制由精确的系统修饰符组合触发的事件只
& lt; !——,即使,Alt 或,Shift 被一同按下时也会触发,——比;
& lt; button v: click.ctrl=皁nClick"祝辞A
& lt; !——,有且只有,Ctrl 被按下的时候才触发,——比;
& lt; button v: click.ctrl.exact=皁nCtrlClick"祝辞A
& lt; !——,没有任何系统修饰符被按下的时候才触发,——比;
& lt; button v: click.exact=皁nClick"祝辞A 鼠标按钮修饰符
<李> .left
<李> .right
<李> .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮只
系统按键组合
如果我们要监听全局的按键操作方法,显然,将其绑定在页面元素上是不行的。
我们可在安装里面监听:
安装(),{
时间=document.onkeydown 才能;function (事件),{
,,,let key =, window.event.keyCode;
,,,if (key ===, 65,,,, event.ctrlKey), {,
,,,,,//,监听ctrl + A组合键,,,,,,
,,,,,window.event.preventDefault();,//关闭浏览器默认快捷键,,,,,,
,,,,,console.log (& # 39; crtl +,一组合键& # 39;),,,,
,,,},else 如果(key ===, 83,,,, event.ctrlKey), {,,,,,,
,,,,,window.event.preventDefault();,//关闭浏览器快捷键
,,,,,console.log(& # 39;保存& # 39;);
,,,}
,,}
} 从以上例子可以看的出,转变,控制,Alt在JS中也可用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event。altKey“代替.
附录-键盘按钮键码表
