键盘事件

  • keydown:按下键盘上的任意按键(除 Fn、电源键等 OS 级别按键)
    • 按住不放的话,会重复触发此事件
    • 对于由自动重复触发的事件,event.repeat === true
  • keyup:释放键盘上的键
    • 此事件不可取消

<input> 的输入

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

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

键码

  • event.key:获取“含义”
  • event.code:获取“物理按键代码”
按键event.keyevent.code
Zz(小写)KeyZ
Shift+ZZ(大写)KeyZ
F1F1F1
BackspaceBackspaceBackspace
ShiftShiftShiftRight 或 ShiftLeft

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

组合键

  • event.shiftKey:Shift
  • event.altKey:Alt(对于 Mac 是 Opt)
  • event.ctrlKey:Ctrl
  • event.metaKey:Win(对于 Mac 是 Cmd)

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

在 Mac 上通常使用 Cmd 代替 Ctrl

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

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

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

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

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

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

默认行为

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

  • 出现在屏幕上的一个字符(最明显的结果)
  • 一个字符被删除(Delete)
  • 滚动页面(PageDown)
  • 浏览器打开“保存页面”对话框(Ctrl+S)

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

历史遗留

  • keypress 事件:按下键盘上的字符键(除 Shift、CapsLock、F1~F12 等功能键)
    • 按住不放的话,会重复触发此事件
    • 对于由自动重复触发的事件,event.repeat === true
    • 先触发 keydown,后触发 keypress
  • event.keyCode:键码,通常是与按键对应的二进制的 ASCII 码
    • 如果这个键不能被标志,值为 0
  • event.charCodekeypress 事件触发时按下的字符键的字符 Unicode 值

过时的,请勿使用

移动端键盘

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

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