⌨️

键盘按键代码查询

按下键盘任意键,实时显示该按键的 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 码,虽然废弃,但在旧系统和许多现有代码中仍在广泛使用。本工具同时展示这三者,方便您进行新旧代码的迁移。

💼 常见应用场景

⚙️ 使用步骤

  1. 鼠标点击一下本页面,确保浏览器焦点在页面上。
  2. 在键盘上按下您想测试的任意按键。
  3. 顶部的巨大数字将显示您按下的键,下方会列出该按键的所有属性。
  4. 右侧面板会实时显示您是否同时按住了 Ctrl、Shift、Alt 或 Meta(Win/Cmd)键。

⚠️ 注意事项

❓ 常见问题 (FAQ)

Q: 为什么 `keyCode` 已经被废弃了?

A: 因为 `keyCode` 的设计过于混乱,它混杂了大小写、浏览器实现差异以及非标准输入。W3C 推荐开发者全面转向使用语义更清晰的 `key` 和 `code` 属性。

Q: 如何监听数字小键盘上的数字?

A: 数字键盘发出的物理 `code` 是以 `"Numpad"` 开头的(如 `"Numpad1"`),而主键盘的数字是 `"Digit1"`。您可以通过右侧的 `location` 属性(值为 3 代表小键盘)来区分它们。