键盘按键值查询工具 - 在线KeyCode/Key/Code查询

什么是按键值查询？

键盘事件（keydown、keyup）会携带 key、code、keyCode 等属性，分别表示按键对应的字符、物理键位和废弃的数字编码。开发快捷键、游戏控制或表单交互时，经常需要确认某个键在这些属性中的具体值。

Yeo工具箱的按键值查询工具让你按任意键即可实时看到 KeyboardEvent 的全部关键属性，同时显示修饰键状态，无需打开开发者工具调试，适合前端开发者和初学者快速查阅键值对照。

如何使用Yeo工具箱的按键值查询？

1. 点击下方输入区域使其获得焦点
2. 按下键盘上的任意按键
3. 页面会实时显示 key、code、keyCode 等事件属性值
4. 同时会显示 Ctrl、Shift、Alt、Meta 修饰键是否被按下

常见使用场景

• 场景1：开发键盘快捷键功能时确认按键编码
• 场景2：实现游戏控制时查询方向键和功能键值
• 场景3：排查键盘事件在不同浏览器的兼容性问题
• 场景4：教学 JavaScript 事件系统时的演示工具
• 场景5：无障碍开发中确认特殊按键的键值

使用小贴士

• 新项目请优先使用 key 和 code，keyCode 已废弃且在不同浏览器中存在差异
• code 表示物理键位，不受输入法影响；key 受键盘布局和输入法影响

常见问题

Q1: keyCode和key有什么区别？

keyCode是数字编码(回车=13、空格=32)，已被废弃。key是按键的实际字符(回车="Enter"、字母A="a")，是W3C推荐用法。code是物理键位(回车="Enter"、空格="Space")，不受键盘布局影响。新代码应优先使用key和code。

Q2: 为什么按同一个键在不同浏览器上keyCode不同？

keyCode已被废弃，不同浏览器对非标准键(如功能键、媒体键)的keyCode实现可能不一致。这也是为什么W3C推荐使用key和code取代keyCode。

Q3: 如何监听组合键比如Ctrl+S？

监听keydown事件，同时检查event.ctrlKey、event.metaKey(Mac的Cmd)、event.shiftKey、event.altKey属性。例如：if (e.ctrlKey && e.key === "s") { e.preventDefault(); 保存操作(); }

更新日志

• 2026-08-04 更新：Yeo工具箱 按键值查询工具正式上线

⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。