Vue的键盘事件

Posted 2023-03-26

参考技术A 1、Vue 中的按键别名：
回车 => enter
删除 => delete （捕获‘删除’和‘退格’键）
退出 => esc
空格 => space
换行 => tab
上 => up
下 =>down
左 => left
右 => right

2、Vue未提供别名的按键，可以使用按键原始的 key 值 去绑定，但是需要注意转换用短横线命名（比如：键盘上的：CAPSLOCK 。就需要转换为：caps-lock）

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

4、也可以使用 keyCode 去指定具体的按键（不推荐）

keyCode MDN

5、 Vue.config.keyCodes.自定义的键名 = 键码 也可以定制按键别名

vue键盘事件不生效

参考技术A 很多刚开始使用v-on的键盘事件时，经常会碰到明明添加了@keyup.按键名/值，却没有起作用，（小鸡不尿尿，各有各的道），其实不是没有起作用，而是元素没有获取焦点导致的。

比如把 keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件。点击之后，焦点就在按钮上，所以这时按空格键有效。

思路：