键盘事件

<input> 的输入

想要跟踪 <input> 的输入,键盘事件是不够的,应该使用 inputchange 事件

因为输入不仅仅只有键盘,还可能是语音识别、复制/粘贴等

键码

按键 event.key event.code
Z z(小写) KeyZ
Shift+Z Z(大写) KeyZ
F1 F1 F1
Backspace Backspace Backspace
Shift Shift ShiftRight 或 ShiftLeft

如果用户使用不同的语言,那么切换到另一种语言将产生完全不同的字符,而不是 "Z"。它将成为 event.key 的值,而 event.code 则始终都是 "KeyZ"

组合键

如果在事件期间按下了相应的键,则它们为 true

在 Mac 上通常使用 Cmd 代替 Ctrl

在大多数情况下,当在 Windows/Linux 上使用 Ctrl 时,在 Mac 是使用 Cmd

因此,如果想支持 Ctrl+click,那么对于 Mac 应该使用 Cmd+click

想强制 Mac 用户使用 Ctrl+click 非常困难。问题是:在 MacOS 上左键单击和 Ctrl 一起使用会被解释为右键单击,并且会生成 contextmenu 事件,而不是像 Windows/Linux 中的 click 事件

人体工程学:别忘了移动设备

键盘组合是工作流的一个补充,如果访客使用键盘操作可以快捷触发

但是如果访客的设备没有键盘呢?——应该提供其他方式触发相同的功能

默认行为

默认行为各不相同,因为键盘可能会触发很多可能的东西,例如:

阻止 keydown 的默认行为可以取消大多数的行为,但基于 OS 的特殊按键除外。例如,在 Windows 中,Alt+F4 会关闭当前浏览器窗口,并且在 JS 中无法阻止

历史遗留

过时的,请勿使用

移动端键盘

当使用虚拟/移动端键盘时,更正式一点的名字叫做 IME(Input-Method Editor),W3C 标准规定 KeyboardEvent 的 e.keyCode 应该为 229,并且 e.key 应该为 "Unidentified"

当按下某些按键(例如箭头或退格键)时,虽然其中一些键盘可能仍然使用正确的值来表示 e.keye.codee.keyCode、...,但并不能保证所有情况下都能对应正确的值。所以你的键盘逻辑可能并不能保证适用于移动设备