键盘 KeyCode 查看器 - JavaScript 键盘事件检查器

如何使用 KeyCode 查看器

1. 按任意键：点击工具区域并按键盘上的任意键开始
2. 查看属性：所有键盘事件属性将立即显示，包括：
   • 现代属性：key 和 code（推荐用于新项目）
   • 旧版属性：keyCode、which 和 charCode（用于向后兼容）
3. 复制值：点击任何属性旁边的复制按钮将其值复制到剪贴板
4. 测试修饰键：单独或组合按住 Shift、Ctrl、Alt 或 Meta（Command/Windows）键查看其状态
5. 尝试特殊键：测试方向键、功能键、Enter、Escape、Tab 和其他特殊键
6. 检查位置：按左/右修饰键或数字键盘按键查看 location 属性差异

理解键盘事件属性

• key：（推荐）按下的键的实际值（例如 "a"、"A"、"Enter"、"ArrowUp"）。根据修饰键和键盘布局变化。用于字符输入检测。
• code：（推荐）表示键盘上键位置的物理键代码（例如 "KeyA"、"Digit1"、"ArrowUp"）。在不同键盘布局中保持一致。用于游戏控制和物理键检测。
• keyCode：（已弃用）键的数字代码（例如 "A" 为 65）。在浏览器和键盘之间不一致。避免在新代码中使用。
• which：（已弃用）类似于 keyCode，用于旧版浏览器兼容性。避免在新代码中使用。
• charCode：（已弃用）仅用于 keypress 事件的字符代码。已被 key 属性替代。
• location：指示键的物理位置（0：标准，1：左侧，2：右侧，3：数字键盘）。用于区分左/右修饰键。

键盘事件最佳实践

• 使用 event.key 当你关心用户输入的字符时（文本输入、搜索）
• 使用 event.code 当你关心物理键位置时（游戏、WASD 控制、键盘快捷键）
• 避免 keyCode 和 which 因为它们已被弃用且在浏览器间不一致
• 检查修饰键 使用 event.shiftKey、event.ctrlKey、event.altKey、event.metaKey
• 使用 keydown 处理大多数键盘快捷键（按住时重复触发）
• 使用 keyup 处理应在释放键时触发一次的操作
• 阻止默认行为 在实现自定义快捷键时使用 event.preventDefault()

常见使用场景

• 键盘快捷键：使用 code 属性配合修饰键检查来检测 Ctrl+S、Cmd+K 等
• 表单导航：使用 key 属性处理 Enter、Tab、Escape 键
• 游戏控制：使用 code 属性处理 WASD、方向键和动作按钮
• 无障碍访问：为屏幕阅读器用户实现键盘导航
• 文本编辑器：通过精确的按键检测构建自定义文本编辑功能