JavaScript 键盘事件一团糟——这里是你会收藏的键盘码参考

在你的JavaScript职业生涯中，某一天你决定处理一个按键事件。这听起来很简单。你打开MDN，却发现有四个不同的属性可供选择： keyCode, which, key，并且 code其中三个已经被弃用。它们对“键”的定义并不一致。恭喜你——你已经来到了网络世界中最混乱的历史角落之一。

本指南将消除噪音。你将了解到哪些属性应该使用，哪些应该避免，并获得一个完整的常见键值表，从而避免盲目猜测。

四个属性——以及为何有四个

JavaScript键盘事件在事件对象上暴露了多个属性。以下是每个属性的实际含义：

财产	返回的内容	地位
event.key	一个可读的字符串，例如 "Enter", "ArrowUp"， 或者 "a"	✅ 建议使用此属性
event.code	物理按键标识符，例如 "KeyA", "Digit1", "ArrowLeft"	✅ 建议用于布局无关的检测
event.keyCode	一个数值代码，例如 13 用于回车键	⚠️ 已弃用——在新代码中避免使用
event.which	与 keyCode	⚠️ 已弃用——在新代码中避免使用

keyCode 且 which 本质上是不同浏览器历史时期的同一事物。两者都返回一个表示键的整数。两者均已弃用。两者在所有浏览器中仍然有效，这就是为什么你在2015年之前的旧代码库中会频繁遇到它们的原因。

为什么 keyCode 已弃用但仍普遍存在

keyCode 是浏览器DOM中检测按键的最初方式，可追溯到Netscape早期的事件模型。它在大多数情况下是有效的，但存在严重不一致性：同一按键在不同浏览器中可能返回不同的代码，大写字符处理不一致，非ASCII字符则一团糟。

W3C在DOM Level 3 Events规范（2016年）中正式弃用了 keyCode 且 which ，转而推荐使用 key 且 code。但弃用意味着“我们建议你停止使用”，而不是“我们将破坏你的网站”。浏览器仍然支持它，而且短期内很可能仍会支持。

结果是，旧代码库中充斥着 event.keyCode === 13 检查，2012年的Stack Overflow答案推荐使用它，你几乎在所有生产代码中都能找到它。它不会很快消失——你只是不应该 编写 新的使用它的代码。

event.key vs event.code ——你需要哪一个？

这是大多数人困惑的地方。两者都是现代的，且都是正确的——它们只是回答了不同的问题。

• 使用 event.key 当你关心用户想要输入的字符时。在美式键盘上，按下Shift + 2会得到 event.key === "@"。在德式键盘上，同一个物理按键会生成不同的字符。 event.key 反映了实际的逻辑输出。
• 使用 event.code 当你关心按下的是哪个物理按键，而不考虑键盘布局时。这在游戏控制、不随用户语言变化的快捷键或“Q键”指的是左上角字母键而非字符Q的场景中非常有用。

对于大多数实际应用场景——表单提交、对话框关闭、快捷键—— event.key 是你要选择的。对于游戏控制和基于位置的快捷键，应使用 event.code.

在现代JavaScript中正确处理按键

以下是处理常见情况的正确方法：

回车键（表单提交、确认对话框）

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Esc键（关闭模态框、取消操作）

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

方向键（导航、滑块、游戏控制）

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

修饰键（Ctrl+S，Cmd+K等）

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

使用 e.ctrlKey, e.shiftKey, e.altKey，并且 e.metaKey (Mac上的Cmd) 用于检测修饰键组合。这些属性未被弃用，且行为完全符合预期。

完整的按键参考表

下表列出了你最常使用的按键。对于未列出的按键，使用 按键码信息工具 ——按任意按键即可立即获取 event.key, event.code，以及旧版 keyCode 值。

钥匙	event.key	event.code	keyCode（旧版）
隆重推出	"Enter"	"Enter"	13
Escape	"Escape"	"Escape"	27
空间	" " (空格)	"Space"	32
标签	"Tab"	"Tab"	9
退格键	"Backspace"	"Backspace"	8
删除键	"Delete"	"Delete"	46
向上箭头	"ArrowUp"	"ArrowUp"	38
向下箭头	"ArrowDown"	"ArrowDown"	40
向左箭头	"ArrowLeft"	"ArrowLeft"	37
向右箭头	"ArrowRight"	"ArrowRight"	39
家	"Home"	"Home"	36
结束	"End"	"End"	35
页面向上	"PageUp"	"PageUp"	33
页面向下	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift（左）	"Shift"	"ShiftLeft"	16
Ctrl（左）	"Control"	"ControlLeft"	17
Alt（左）	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
大写锁定键	"CapsLock"	"CapsLock"	20
a–z（小写）	"a"-"z"	"KeyA"-"KeyZ"	65–90
0–9（顶部行）	"0"-"9"	"Digit0"-"Digit9"	48–57
0–9（数字小键盘）	"0"-"9"	"Numpad0"-"Numpad9"	96–105

你记不住的按键码？立即查找

没有参考表涵盖所有键盘布局下的每一个按键。当你需要某个按键（如数字小键盘键、媒体键、区域性字符）的确切值时，最快的方法是按下该键并查看。

这 按键码信息工具 正好做到了这一点。按下任意按键，它会立即显示你按下的按键 event.key, event.code, event.keyCode，并且 event.which ——以及修饰键状态。无需从MDN复制粘贴，无需猜测“NumpadEnter”实际叫什么。

简明版

• 使用 event.key 对于大多数键盘处理场景——它可读性强、现代且支持区域设置。
• 使用 event.code 当物理按键位置比字符更重要时（如游戏控制、基于位置的快捷键）。
• 停止编写使用 event.keyCode 或 event.which的新代码。它们虽然有效，但已被弃用且可预测性较差。
• 当你遇到使用 keyCode === 13的旧代码时，这意味着回车键。 keyCode === 27 表示Esc键。上表列出了其余内容。
• 对于无法在任何参考表中找到的按键，直接在 按键码信息工具 上按下即可立即获得答案。

你可能也会喜欢