键盘按键代码查询
按下键盘任意键,实时显示该按键的 event.key、event.code、keyCode 等底层开发属性。
键盘按键代码查询
请按下键盘按键
等待按键输入...
CtrlKeyfalse
ShiftKeyfalse
AltKeyfalse
MetaKey (Cmd/Win)false
键盘按键代码查询工具使用指南
📌 简介
键盘按键代码查询工具是一款专为前端开发者和游戏开发者设计的在线实用字典。在开发网页游戏、快捷键响应逻辑或表单校验时,我们需要监听键盘事件。然而,不同的浏览器、甚至不同的键盘布局(如美式键盘 vs 德式键盘),对同一个物理按键会返回不同的 `key` 和 `keyCode`。本工具可以直观地显示您当前按下的按键的详细底层信息,帮您快速获取正确的代码进行逻辑编写。
📖 现代键盘事件的三剑客
随着 Web 标准的演进,键盘事件对象中的属性也在更新换代:1. event.key: 最推荐的属性。它返回按下按键的字符值,如按下 A 键返回 `"a"`,按住 Shift 返回 `"A"`,按下空格返回 `" "`。2. event.code: 返回物理键位。它不受输入法和 Shift 键影响,比如美式键盘上的 Q 键和法式键盘上的 A 键,位置一样,它们的 `code` 都是 `"KeyQ"`。3. event.keyCode(已废弃): 返回数字 ASCII 码,虽然废弃,但在旧系统和许多现有代码中仍在广泛使用。本工具同时展示这三者,方便您进行新旧代码的迁移。
💼 常见应用场景
- 游戏控制: 确定 WASD 或方向键对应的 code,以编写角色移动逻辑。
- 快捷键绑定: 在富文本编辑器中,捕获 Ctrl + C、Cmd + V 组合键。
- 兼容性测试: 更换外接键盘或测试手机虚拟键盘,查看发送的 key 是否与预期一致。
- 特殊按键处理: 禁用表单中的回车键提交,或处理 Esc 键关闭弹窗。
⚙️ 使用步骤
- 鼠标点击一下本页面,确保浏览器焦点在页面上。
- 在键盘上按下您想测试的任意按键。
- 顶部的巨大数字将显示您按下的键,下方会列出该按键的所有属性。
- 右侧面板会实时显示您是否同时按住了 Ctrl、Shift、Alt 或 Meta(Win/Cmd)键。
⚠️ 注意事项
- 部分系统级快捷键(如 Ctrl+W 关闭标签页、Win 键打开开始菜单)会被浏览器或操作系统拦截,本工具无法捕获。
- 使用了 Ctrl 或 Shift 组合键时,`event.key` 的值会发生变化(如变成大写或特殊符号),请结合 `event.code` 判断物理按键。
❓ 常见问题 (FAQ)
Q: 为什么 `keyCode` 已经被废弃了?
A: 因为 `keyCode` 的设计过于混乱,它混杂了大小写、浏览器实现差异以及非标准输入。W3C 推荐开发者全面转向使用语义更清晰的 `key` 和 `code` 属性。
Q: 如何监听数字小键盘上的数字?
A: 数字键盘发出的物理 `code` 是以 `"Numpad"` 开头的(如 `"Numpad1"`),而主键盘的数字是 `"Digit1"`。您可以通过右侧的 `location` 属性(值为 3 代表小键盘)来区分它们。