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

交互式 JavaScript 键盘事件检查器。按任意键即可查看 keyCode、key、code、which、charCode 和修饰键状态。Web 开发者构建键盘快捷键和事件处理器的必备调试工具。

键盘 KeyCode 查看器 - JavaScript 键盘事件检查器 工具介绍

专为 Web 开发者设计的专业键盘事件检查器。按任意键即可实时查看所有 JavaScript 键盘事件属性。是调试键盘交互、构建自定义快捷键和理解键盘 API 的必备工具。

此工具显示全面的信息,包括现代属性(key、code)和旧版属性(keyCode、which、charCode),以及修饰键状态和事件元数据。非常适合在不同浏览器和键盘布局中测试键盘事件处理器。

核心功能:

  • 实时检测:即时显示所有键盘事件属性
  • 现代标准:显示推荐的 key 和 code 属性
  • 旧版支持:包含已弃用的 keyCode、which 和 charCode 以保持兼容性
  • 修饰键:跟踪 Shift、Ctrl、Alt 和 Meta 键状态
  • 事件类型:区分 keydown、keyup 和 keypress 事件
  • 按键位置:识别左/右修饰键和数字键盘按键
  • 复制功能:一键复制任何属性值
  • 开发者提示:内置最佳实践和建议
  • 跨浏览器:在所有现代浏览器中一致工作
  • 键盘布局感知:正确处理不同的键盘布局

键盘 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、方向键和动作按钮
  • 无障碍访问:为屏幕阅读器用户实现键盘导航
  • 文本编辑器:通过精确的按键检测构建自定义文本编辑功能

常见问题