如何在 JavaScript 中检测键盘输入事件

网页中的键盘输入是使用键盘事件处理的。使用 addEventListener() 注册监听器，然后读取传递给其回调的事件对象。使用 keydown 在按下按键时响应，使用 keyup 在释放按键后响应。

使用 addEventListener() 监听键盘事件

将监听器附加到应该接收输入的元素。当页面应该在焦点位于页面任何位置时响应，请使用 document；当该行为属于某个表单控件时，则将其附加到该控件。回调会接收一个 KeyboardEvent 作为参数，因此请为该参数命名并读取其属性，而不是依赖全局的 event 值。

这个可执行的示例使用一个小型的 document 替代物，并提供一个按键事件，因此可以在 JavaScript 运行时中尝试其监听器形式。在浏览器中，使用真实的 document 来接收键盘输入。

const listeners = new Map();
const document = {
  addEventListener(type, callback) {
    listeners.set(type, callback);
  }
};

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

listeners.get("keydown")({ key: "ArrowDown" });

真实的浏览器会在用户按下按键时调用回调。上面的替代物使用包含处理程序所使用的相同 key 值的对象来调用它；它不会模拟浏览器输入或其他 KeyboardEvent 行为。

在 keydown 和 keyup 之间选择

按下按键时会触发 keydown 事件。它非常适合应该立即开始的动作，例如在按住按键时移动游戏角色。释放按键时会触发 keyup 事件，适合应该在用户结束按住按键后发生的动作。根据动作应该发生的时间选择事件。按住按键可能会产生重复的 keydown 事件，因此当动作应该只发生一次时，请考虑到这一点。

读取 KeyboardEvent.key 并处理特殊按键

使用 event.key 在处理程序中识别按键。它返回可读的值，例如 "a"、"Enter" 和 "ArrowDown"，使比较变得简单。例如，方向键处理程序可以在将项目向下移动之前检查 event.key === "ArrowDown"。修饰键状态也可从事件中获得，通过 event.shiftKey 和 event.ctrlKey 等属性。

event.key 的值反映了按键在当前键盘布局和修饰键下的含义。当行为应该遵循物理按键位置时，例如在不同布局下保持在同一位置的游戏控制，请使用 event.code。对于普通命令和命名按键，event.key 通常是更清晰的选择。

在需要时防止按键的默认动作

键盘事件处理程序可以调用 event.preventDefault() 来抑制与该按键相关联的浏览器动作，例如将方向键用于自定义界面时的滚动。仅当页面承担该动作的责任时才调用它，并且当行为依赖于可取消性时检查 event.cancelable。它不会阻止事件到达其他监听器；仅当这也是预期行为时才使用传播方法。普通的按键检测不需要取消。

为什么通常应避免使用 keypress

避免在新的键盘处理中使用 keypress。它已被弃用，并且不能一致地涵盖所有按键。使用 keydown 或 keyup 观察键盘动作，使用 event.key 读取按键值。对于当前的代码，不要依赖 event.char 或旧有的 keyCode 属性；使用描述按键及其状态的标准事件属性。