ZeroTool Workbench
JavaScript 键码探查器
在浏览器中按任意键，即时查看 event.key、event.code、keyCode、charCode、location、repeat 与修饰键状态，并复制现成的 JS 判断片段。纯浏览器端运行，零配置。
使用方法
- 点击捕获区域——首次进入页面时会自动获取键盘焦点。
- 按下任意键，修饰键、功能键、方向键均可。
- 查看 event.key、event.code 以及已弃用的 keyCode / which / charCode。
- 按住 Shift / Ctrl / Alt / Meta 时对应修饰键 pill 会亮起。
- 复制生成的 JS 代码片段，直接用于你自己的代码。
event.key、event.code 与 keyCode 对照
前端键盘逻辑 bug 大多来自混用这三个属性。对照表如下：
| 属性 | 受布局影响 | 推荐使用 | QWERTY 按 A 时的取值 |
|---|---|---|---|
| event.key | 是（反映当前布局） | 推荐——语义判断 | ”a” 或按 Shift 时 “A” |
| event.code | 否（物理位置） | 推荐——游戏/快捷键绑定 | ”KeyA” |
| keyCode | 否 | 不推荐——已弃用 | 65 |
| which | 否 | 不推荐——已弃用 | 65 |
| charCode | 否 | 不推荐——keydown 时恒为 0 | 0 |
常见用途
- 调试键盘事件处理——把 event.key 实际值粘到 if 条件里，排查拼写错误。
- 实现游戏控制——优先用 event.code，让 AZERTY 布局也能用 WASD 走位。
- 命令面板快捷键——组合 event.key 与 e.ctrlKey / e.metaKey。
- 审计遗留代码——读出 keyCode / which，把老代码迁移到 event.key。
- 识别 IME 输入——e.isComposing = true 表示中文/日文输入法正在组字，单键处理器应直接返回。
关于 preventDefault
捕获区域仅对 Tab、Space、Backspace、方向键、F1-F12 调用 preventDefault()——这些是浏览器会消费的导航/页面键。
Ctrl+W / Cmd+Q 等系统级快捷键不拦截，保持浏览器默认行为。
FAQ
event.key、event.code 和 keyCode 有什么区别？
event.key 是应用键盘布局后的可读字符或键名（例如 Dvorak 布局下按物理 A 位置得到的 event.key 可能是 'a'）；event.code 是基于美式 QWERTY 的物理按键位置（KeyA、Digit1、ArrowUp），不随布局变化；keyCode 是早期的数字键码（A 为 65），已被标准弃用，浏览器仅为向后兼容保留。
为什么 keyCode、which 和 charCode 都已弃用？
这三个属性在不同浏览器之间不一致，对非拉丁布局也不可靠。现代代码应使用 event.key（语义判断）或 event.code（物理位置）。MDN 把 keyCode 与 charCode 标为「deprecated, not recommended for production」，但主流浏览器仍因兼容性继续发出这些字段——本工具原样展示，方便你审计老代码。
如何判断 Shift / Ctrl / Alt / Meta 修饰键？
直接读 KeyboardEvent 上的 e.shiftKey、e.ctrlKey、e.altKey、e.metaKey 即可，每个都是 boolean。注意 e.metaKey 在 Windows 上对应 Win 键，在 Mac 上对应 Command 键。本页生成的代码片段会根据当前修饰键状态自动组装判断条件。
移动端能用吗？
移动端物理键盘事件在各平台不一致——许多软键盘不会逐字符触发 keydown，只会发出一个 input 事件返回最终字符串。本工具按桌面浏览器设计，物理键盘信号在桌面端最完整。移动端提供一个降级单字符输入框只能读到部分信息，要完整调试事件属性请使用桌面浏览器。设计上不模拟移动端 keydown。
按键数据会发送到服务器吗？
不会。所有事件处理都通过浏览器原生 KeyboardEvent API 在本地完成，你按下的内容不会离开设备。可在 DevTools → Network 中验证。