件并不是所有按键都能绑定键盘事件常用的按键不同的tab和四个按键keyCode绑定键盘事件不推荐Vue.config.keyCode.自定义键名

神奇的猜想div标签和click.enterbutton标签和click.enter

前文提要

keydown.entershowInfo/divscript

typetext/javascriptVue.config.productionTip

falseconst

/body当你点击输入框之后按下回车键就会在控制台输出’触发了’

回车已经介绍过了如果你将上文代码中的enter改为delete那么当你选中了输入框的时候按下backspace退格和delete删除都会触发键盘事件。

其中tab键有所不同你使用keyup触发事件是无效的只能使用keyup

验证代码如下

当你按住alt并且按下其他按键的时候才会触发键盘事件调用回调函数。

keyCode绑定键盘事件不推荐

当你不知道这个按键的名字的时候也可以用按键对应的数值来绑定键盘事件

bodydiv

keydown.caps-lockshowInfo/divscript

typetext/javascriptVue.config.productionTip

falseconst

{console.log(event.key,event.keyCode)}}})/script

/body向CapLock这种由两个单词组成的按键需要将单词首字母全部变为小写且用’-隔开才能使用。

有图可知这个CapsLock按键对应的key值是20我们也就可以用如下代码代替上文代码中的这个部分也可以起到相同的效果。

keyCode绑定键盘事件代码如下

keydown.huicheshowInfo/divscript

typetext/javascriptVue.config.productionTip

falseconst

{console.log(event.key,event.keyCode)}}})Vue.config.keyCodes.huiche

13;/script

stylebackground-color:red点我触发事件/div鼠标点击div标签触发事件

此时按下或是按住都不会触发键盘事件都不会在控制台输出’触发了’

button标签和click.enter

click.entershowInfo点我触发事件/button鼠标点击按钮能够触发事件

如果你的鼠标放在按钮以外的位置按下回车键的时候无法在控制台输出1这很正常。

但是如果你把鼠标放在按钮之上不点击只是放着按下回车键则会触发事件在控制台输出1这就不是很正常了。

所以键盘事件最好还是配合keydown和keyup这些事件进行使用。