键盘事件

Yang2022年10月14日大约 2 分钟

keydown/keyup

当按键被按下时，触发 keydown 事件
当按键被释放时，触发 keyup 事件

event.code/event.key

事件对象的 key 属性允许获取字符，而事件对象的 code 属性则允许获取物理按键代码

Key	`event.key`（随位置改变）	`event.code`(保持不变)
Z	`z`（小写）	`KeyZ`
Shift+Z	`Z`（大写）	`KeyZ`

自动重复

如果按下一个键足够长的时间，它就会开始“自动重复”：keydown 会被一次又一次地触发
当按键被释放时，最终会得到 keyup。因此，有很多 keydown 却只有一个 keyup 是很正常的
对于由自动重复触发的事件，event 对象的 event.repeat 属性被设置为 true

默认行为

阻止对 keydown 的默认行为可以取消大多数的行为，但基于系统的特殊按键除外，例如系统快捷键等

出现在屏幕上的一个字符
一个字符被删除（Delete 键）。
滚动页面（PageDown 键）。
浏览器打开“保存页面”对话框（Ctrl+S）
...等

其他

过去有一个 keypress 事件，还有事件对象的 keyCode、charCode 和 which 属性，大多数浏览器对它们都存在兼容性问题，以致使该规范的开发者不得不弃用它们并创建新的现代的事件
键盘逻辑并不能保证适用于移动端设备

例子

输入控制

允许数字、某些特殊字符、左右方向键、删除

<script>
function checkPhoneKey(key) {
  return (key >= '0' && key <= '9') ||
    ['+','(',')','-','ArrowLeft','ArrowRight','Delete','Backspace'].includes(key);
}
</script>
<input onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">

同时按下Q和W按键时触发

<!DOCTYPE HTML>
<html>
<body>
  <script>
    function runOnKeys(func, ...codes) {
      let pressed = new Set();
      document.addEventListener('keydown', function(event) {
        pressed.add(event.code);
        for (let code of codes) { // 所有的按键都在集合中？
          if (!pressed.has(code)) {
            return;
          }
        }
        
        // 在 alert 期间，如果访客松开了按键，
        // JavaScript 就不会获得 "keyup" 事件
        // 那么集合 pressed 会保持假设这些按键是被按下的状态
        // 为避免“粘滞”键，对状态进行了重置
        // 如果用户想再次运行热键 —— 他们需要再次按下所有键
        pressed.clear();
        func();
      });
      document.addEventListener('keyup', function(event) {
        pressed.delete(event.code);
      });
    }
    runOnKeys(
      () => alert("Hello!"),
      "KeyQ",
      "KeyW"
    );
  </script>
</body>
</html>