keydown:按下键盘上的任意按键(除 Fn、电源键等 OS 级别按键)
event.repeat === truekeyup:释放键盘上的键
<input> 的输入
想要跟踪 <input> 的输入,键盘事件是不够的,应该使用 input、change 事件
因为输入不仅仅只有键盘,还可能是语音识别、复制/粘贴等
event.key:获取“含义”event.code:获取“物理按键代码”| 按键 | 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"
event.shiftKey:Shiftevent.altKey:Alt(对于 Mac 是 Opt)event.ctrlKey:Ctrlevent.metaKey:Win(对于 Mac 是 Cmd)如果在事件期间按下了相应的键,则它们为 true
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 中无法阻止
keypress 事件:按下键盘上的字符键(除 Shift、CapsLock、F1~F12 等功能键)
event.repeat === truekeydown,后触发 keypressevent.keyCode:键码,通常是与按键对应的二进制的 ASCII 码
event.charCode:keypress 事件触发时按下的字符键的字符 Unicode 值过时的,请勿使用
当使用虚拟/移动端键盘时,更正式一点的名字叫做 IME(Input-Method Editor),W3C 标准规定 KeyboardEvent 的 e.keyCode 应该为 229,并且 e.key 应该为 "Unidentified"
当按下某些按键(例如箭头或退格键)时,虽然其中一些键盘可能仍然使用正确的值来表示 e.key、e.code、e.keyCode、...,但并不能保证所有情况下都能对应正确的值。所以你的键盘逻辑可能并不能保证适用于移动设备