显示任意按键的 event.key、event.code、keyCode 和 event.location 显示 Ctrl、Shift、Alt、Meta 状态及按键重复为所按的键生成可复制的 JavaScript if 语句最近按键历史测试时阻止空格键和方向键滚动页面

JavaScript 键码测试 - event.key、event.code 和 keyCode

event.key、event.code 与 keyCode 的区别

在浏览器中每按一次键都会触发一个带有多个属性的 KeyboardEvent。event.key 是按键产生的值，例如 "a"、"A"、"Enter" 或 "ArrowUp"，它会随用户的键盘布局和 Shift 状态变化。event.code 描述的是物理按键，例如 "KeyA" 或 "Digit1"，在 QWERTY、AZERTY 或 Dvorak 键盘上都保持不变。keyCode 和 which 是旧的数字键码，已经废弃，而且在不同浏览器和布局之间并不一致。现代代码应在处理文字和快捷键时使用 event.key，在位置重要时（如游戏中的 WASD 控制）使用 event.code。

功能

• 显示任意按键的 event.key、event.code、keyCode 和 event.location
• 显示 Ctrl、Shift、Alt、Meta 状态及按键重复
• 为所按的键生成可复制的 JavaScript if 语句
• 最近按键历史
• 测试时阻止空格键和方向键滚动页面

从设计上保护隐私

按键事件只在本页面、你的浏览器中读取，按下的任何键都不会被记录或发送。

不记录按键，100% 客户端。

键码测试使用方法

1
点击页面任意位置让页面获得焦点，然后按下一个键。在手机上，点击输入框打开屏幕键盘。
2
最大的那个值就是 event.key，下方是 event.code 和旧的 keyCode。
3
在卡片中查看按键位置（左右 Shift、数字小键盘）和按住的修饰键，点击一下即可复制任意值。
4
把生成的 if 语句复制到你的 keydown 处理函数中。历史记录显示最近的按键，方便对比组合键。

实际应用示例

键盘快捷键

要实现 Ctrl+K 或 Cmd+K 打开搜索，按下组合键后使用 event.key === "k" 配合 event.ctrlKey || event.metaKey，在 Windows 和 macOS 上都能用。

游戏操作

使用 event.code（"KeyW"、"KeyA"、"KeyS"、"KeyD"），在 AZERTY 等其他布局上移动键仍在同一位置，而 event.key 会变成 "z" 或 "q"。

按 Enter 发送

在聊天输入框中检查 event.key === "Enter" 且 !event.shiftKey，实现 Enter 发送、Shift+Enter 换行。

数字小键盘和左右按键

应用需要时，可以区分数字小键盘的 Enter（location 3）和主键盘的 Enter，或者左右 Shift（location 1 和 2）。

常见问题

该用 event.key 还是 event.code？+

与字符相关的操作用 event.key，比如字母快捷键、文本输入、Escape 和 Enter。物理位置重要时用 event.code，比如游戏或与布局无关的热键。

为什么 keyCode 被废弃？+

keyCode 的值从未标准化：在不同浏览器、键盘布局以及 keydown 和 keypress 之间都不一样。KeyboardEvent 标准用 key 和 code 取代了它，所有现代浏览器都支持。

为什么手机键盘显示 "Unidentified" 或 229？+

屏幕键盘常常发送输入法组合事件而不是真实键码，开启自动更正或使用输入法时尤其如此。在移动端获取文本请监听 input 或 beforeinput 事件。

为什么有些快捷键到不了页面？+

Ctrl+W、Ctrl+T、Cmd+Q、Alt+Tab 等组合会先被浏览器或操作系统处理，网页无法捕获或阻止它们。