按键码查看器

什么是按键代码查看器？#

当一个键被按下，浏览器会触发一个 KeyboardEvent，它同时带着「这是哪个键」的两套答案。key 字段说的是这次按键产生了什么字符——a、A、Enter、?；code 字段说的是你按下了哪个物理键——KeyA、Enter、Slash，与键盘布局无关。这两套答案一旦遇到国际键盘、修饰键、小键盘，就开始分叉；而你恰好在做快捷键、游戏键位、无障碍功能时，需要看清的正是这个分叉。

本页把每一次 keydown 捕获成一个快照，逐字段铺开：key、code、遗留的 keyCode 与 which 数值（为调试老代码保留）、location（标准 / 左 / 右 / 小键盘）、当前按下的修饰键，以及这次按键是否属于长按自动重复。下方还有一条最近若干次按键的滚动历史，方便你追踪一个组合键或一段按键序列。

捕获不是全局的：只有当焦点落在捕获区里时才监听按键，页面的其余部分照常响应键盘。

如何使用#

1. 点击顶部那个虚线 捕获区（或者用 Tab 聚焦进去），它会高亮表示正在监听。
2. 按下一个键，或者一个组合键。下方的快照表会在每次 keydown 时刷新。
3. 阅读各行：
   • key —— 逻辑键值（浏览器解析出的字符或命名键）。
   • code —— 物理键，与布局无关。做快捷键匹配时就看它。
   • keyCode 与 which —— 已废弃的数字代码，带 legacy 徽标。只有在移植还在读这些值的老代码时才需要对照。
   • location —— 标准 / 左 / 右 / 小键盘。靠它区分左 Shift 和右 Shift，或区分小键盘的 5 和主键盘上排的 5。
   • repeat —— 长按自动重复时显示为 是。
   • modifiers —— 用徽标显示当前按下的 Ctrl、Alt、Shift、Meta。
4. 如果不希望浏览器对按键做默认动作（比如测试时不想让 Tab 把焦点带走），勾选选项栏的 阻止默认行为（Prevent default）。
5. 用 复制 取走当前快照，历史面板上的 清空 可重置滚动列表。

主要特性#

• key 与 code 并排展示。 键盘处理里最有用的那组区分，每次按键都直接可见——你能立刻看清为什么 key === "@" 在一种布局下来自 Shift+Digit2，在另一种布局下却来自完全不同的物理键。
• 位置感知。 左右修饰键分别上报，小键盘按键带 location: 小键盘。这对游戏键位尤其关键——同一个数字在主键盘排和小键盘上含义不同。
• 修饰键徽标。 按惯例顺序显示 Ctrl、Alt、Shift、Meta（macOS 上是 Command，Linux/Windows 上是 Super/Windows 键），一个组合键一眼就能读出来。
• 遗留字段清晰标注。 keyCode 和 which 已废弃、现代规范里已移除，但大量存量代码仍在读它们。这里会带 legacy 标签和脚注呈现，绝不会把它们当成首选答案。
• 保留最近 20 条历史。 长按一个键，看 repeat 在每次自动触发时翻成 是；按一段序列，可以回看。每条都是相互独立的快照。
• 作用域内的捕获。 监听器绑定在捕获区上，而不是整个 window。页面的其余部分——Tab 切换、滚动——在你重新聚焦捕获区之前都照常工作。

实战示例#

一个经典的混淆点，是主键盘上排的 1 和小键盘的 1：它们产生同一个字符，但并不是同一个键。

按主键盘上排的 1，快照读数：

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

再按小键盘的 1（Num Lock 开启），快照读数：

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

key 相同，code 不同，location 不同，遗留码也不同。如果你在绑快捷键，就用 code === "Digit1" 表示「字母上方的数字排」，用 code === "Numpad1" 表示「小键盘」——从而避开「用 key === "1" 匹配，结果两个键都会触发」这个坑。

常见问题#

我到底该匹配 key 还是 code？#

取决于你在做什么。做快捷键和游戏键位时匹配 code，因为这时物理位置才重要，你也不希望用户切到 Dvorak 或非拉丁布局后绑定就变了；做文本输入时匹配 key，因为这时产生的字符才是你关心的（? 与 /，或带死键的组合字符）。至于修饰键组合，去检查修饰键标志位（ctrlKey、metaKey……），而不是修饰键自身的 key 值。

为什么 keyCode 和 which 被标成「legacy」？#

它们已被废弃，并从 UI Events 规范中移除。浏览器为了兼容性仍在填这些值，但它们的数值从来就没在不同浏览器或不同布局之间统一过（同一个物理键可能上报不同的数字）。现代代码应该读 key 和 code。这里展示它们，只是为了让你调试或移植还在依赖这些数字的老代码——绝对不要在新绑定里再用它们。

页面好像没捕获到我的按键，为什么？#

捕获是限定在虚线区里的。如果焦点移到了别处——比如你 Tab 出去了，或者点了别的控件——这个区就停止监听了。重新点回捕获区（它会高亮），按键就又能记录了。这种作用域限定是有意为之：让页面的其余部分继续可以被键盘访问。

Meta 键到底指 Command 还是 Windows 键？#

两者都是——Meta 是平台上的「超级键」：macOS 上是 Command，Linux 和 Windows 上是 Windows / Super 键。徽标显示成 Meta 而不是去猜操作系统，因为你代码里真正要测试的，就是 metaKey 这个底层字段。