Keyboard Keycode Viewer
Press any key...
技术详情
按键码查看器的工作原理
工具功能
按键码查看器可实时捕获键盘按键的详细信息,包括 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 的键码参考文档进行查询。