CodeToolProCodeToolProFree Online Developer Tools
GitHub

Keyboard Keycode Viewer

Press any key...

Click here and press any key
This area must be focused to capture keystrokes

技术详情

按键码查看器的工作原理

工具功能

按键码查看器可实时捕获键盘按键的详细信息,包括 key(键名)、code(物理代码)、keyCode(弃用但仍在代码中使用的数字码)、which(同 keyCode)、shiftKey/ctrlKey/altKey/metaKey 修饰键状态等。只需在页面上按下键盘,工具即显示该键的所有属性和编码信息。


常见开发者使用场景

按键码查询是前端键盘事件处理的核心参考:前端开发者在实现快捷键功能(Ctrl+S 保存、Ctrl+Z 撤销)时确定 key 和 code 值、在开发游戏时配置 WASD 移动键映射、在表单验证中检测输入内容(如限制只能输入数字)、在无障碍功能中处理键盘导航事件、以及编写自动化测试时生成模拟键盘事件。

键码相关的工具可结合 ASCII Art 生成器 了解字符编码。Unicode 转换器 可以查看特殊字符的 Unicode 编码。Hex/ASCII 转换器 可进行字符与十六进制的互相转换。按键码参考 提供了完整的键码速查表。


技术原理/相关概念

Web 键盘事件有三个关键事件类型:keydown(按下时触发,可重复)、keypress(已弃用)、keyup(释放时触发)。KeyboardEvent 接口提供多个属性:key(返回按的字符,如 "a", "Shift", "ArrowLeft")、code(返回物理按键位置,与键盘布局无关,如 "KeyA", "ShiftLeft")、keyCode/which(数字代码,已弃用但仍被广泛使用)。修饰键状态通过 booleans(altKey, ctrlKey, metaKey, shiftKey)指示。


常见陷阱与注意事项

  • key vs code:key 反映实际字符输出(不同输入法和键盘布局可能不同),code 反映物理键位(固定)。实现快捷键时优先使用 code 以避免布局问题。
  • keyCode 弃用:keyCode 已从 Web 标准弃用,新代码应使用 key 或 code 替代。但仍有很多遗留代码使用 keyCode,工具提供此值供参考。
  • 操作系统差异:某些修饰键组合被操作系统截获(如 Ctrl+Alt+Delete、Cmd+Tab),浏览器无法捕获这些事件。
  • 死键和 IME:某些键盘输入(如日语输入法、法语重音键)的键盘事件序列与简单按键不同,工具可能显示多个事件序列。

何时使用此工具而非代码

在调试键盘事件处理代码、查询特定按键的编码值或确认快捷键组合的可行性时使用此工具。适合前端开发者在开发快捷键功能时的即时参考。对于需要在代码中查询键码的场景,可以直接在浏览器 console 中查看 event.key 和 event.code,或参考 MDN 的键码参考文档进行查询。