JavaScript 键码：每个键盘按键及其事件属性

理解 JavaScript 键盘事件

JavaScript 中的键盘事件提供了关于按下了哪个键、在什么上下文中以及使用了哪些修饰键的丰富信息。理解不同键属性之间的区别对于构建可访问的键盘界面、游戏和生产力工具至关重要。

键事件属性

当键盘事件触发时，事件对象包含以下属性：

event.key（推荐）

返回按下的键的语义值：

• 字母键："a"、"A"、"z"、"Z"
• 特殊键："Enter"、"Backspace"、"Tab"、"Escape"、"ArrowLeft"
• 修饰键："Shift"、"Control"、"Alt"、"Meta"
• 功能键："F1" 到 "F12"

这是识别键的现代标准。该值具有区域感知能力（正确处理国际键盘）且具有语义性（告诉你键的含义，而不是其物理位置）。

event.code（物理键位置）

返回键盘上物理键的标识符，独立于当前键盘布局：

• "KeyA"、"KeyB"、"KeyZ" 用于字母键
• "Digit1"、"Digit2" 用于数字行数字
• "Numpad1"、"Numpad2" 用于数字键盘数字
• "ArrowLeft"、"ArrowUp" 用于方向键
• "ShiftLeft"、"ShiftRight" 区分左右 Shift 键

当物理键位置很重要（游戏 WASD 控制）且希望布局无关行为时，使用 event.code。

event.keyCode（已弃用）

按下的键的数字代码。这个遗留属性存在浏览器不一致性，不应在新代码中使用。例如，"A" 是 65，"Enter" 是 13，"Escape" 是 27，"Space" 是 32。

event.which（已弃用）

类似于 keyCode，但最初用于鼠标事件。也已弃用，推荐使用 event.key。

修饰键

键盘事件通过布尔属性暴露修饰键状态：

• event.shiftKey：Shift 被按住
• event.ctrlKey：Control 被按住
• event.altKey：Alt（Mac 上的 Option）被按住
• event.metaKey：Meta 键（PC 上的 Windows 键，Mac 上的 Command）被按住

常见的键盘快捷键使用这些组合：

• Ctrl+C / Cmd+C：复制
• Ctrl+Z / Cmd+Z：撤销
• Ctrl+Shift+Z / Cmd+Shift+Z：重做
• Alt+F4：关闭窗口（Windows）

键盘事件类型

三种主要的键盘事件类型按顺序触发：

1. keydown：按下键时触发。按住时重复。大多数键盘快捷键应在此监听。
2. keypress（已弃用）：仅针对可打印字符触发。已弃用，改用 keydown。
3. keyup：释放键时触发。从不重复。

对于文本输入跟踪，在 keydown 上监听或使用表单元素上的 input 事件。

实用事件处理模式

检测键盘快捷键

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault(); // 阻止浏览器的保存对话框
    saveDocument();
  }
});

WASD 游戏控制

const keys = new Set();
document.addEventListener('keydown', (e) => keys.add(e.code));
document.addEventListener('keyup', (e) => keys.delete(e.code));

function gameLoop() {
  if (keys.has('KeyW')) moveUp();
  if (keys.has('KeyS')) moveDown();
  if (keys.has('KeyA')) moveLeft();
  if (keys.has('KeyD')) moveRight();
  requestAnimationFrame(gameLoop);
}

Escape 关闭模态框

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
});

键码参考

JavaScript 中常用的键码：

可访问性与键盘导航

WCAG 2.1 要求所有功能均可通过键盘操作。关键原则：

• 所有交互元素必须能接收键盘焦点
• 焦点必须可见（不要在没有替代方案的情况下移除轮廓）
• Tab 顺序必须符合逻辑并遵循视觉布局
• 自定义小部件必须实现适当的键盘模式（菜单使用方向键，激活使用 Enter/Space）
• 模态对话框在打开时必须将焦点限制在其中
• 提供跳过导航链接以绕过重复内容

ARIA 模式如 menu、listbox、dialog 和 tablist 定义了复杂小部件的预期键盘行为。

使用键码信息工具

我们的工具：

1. 按下任意键 — 立即显示该键事件的所有属性
2. 显示所有属性 — key、code、keyCode、which、charCode
3. 显示修饰键状态 — 哪些修饰键被按住
4. 复制值 — 一键复制任何属性值
5. 按键历史 — 跟踪最近几次按键
6. 比较模式 — 查看不同键盘如何报告相同的键

对于调试键盘处理代码、理解浏览器差异以及实现正确的键盘快捷键至关重要。