深入理解 JavaScript 键盘事件 (KeyboardEvent)
在 Web 开发中，处理用户键盘输入是交互设计的核心。每当用户按下按键时，浏览器都会触发一个 `KeyboardEvent` 对象。理解这个对象中的各个属性，对于开发快捷键支持、游戏控制或自定义输入组件至关重要。
KeyCode, Which 与 Code 的区别是什么？
- event.key: 返回按键生成的字符值。例如按下 'a' 返回 "a"，按下 'Shift' 返回 "Shift"。它是最符合人类直觉的属性。
- event.code: 返回物理按键的标识符。例如，无论你的输入法是什么，键盘左侧的 'A' 键始终返回 "KeyA"。这对游戏开发非常有用。
- event.keyCode / which: 这是旧版标准的属性，返回按键的数字代码。虽然在现代标准中已被废弃，但在旧代码库和某些特定场景中仍然被广泛使用。
修饰键 (Modifier Keys) 的重要性
修饰键包括 Shift、Control、Alt 和 Meta（在 Windows 上是 Win 键，在 Mac 上是 Command 键）。通过检测 `event.shiftKey` 等布尔值，开发者可以实现复杂的组合键逻辑，如 `Ctrl + S` 保存文档或 `Shift + Click` 多选项目。
键盘位置 (event.location) 属性
你是否知道键盘上有两个 'Enter' 键或两个 'Shift' 键？`event.location` 属性可以告诉你用户按下的具体是哪一个：
- 0: 标准位置（如主键盘区的字母和数字）。
- 1: 左侧位置（如左 Shift 或左 Alt）。
- 2: 右侧位置（如右 Shift 或右 Alt）。
- 3: 数字小键盘区。
为什么开发者需要在线按键检测工具？
在不同的操作系统（Windows vs macOS）和不同的浏览器（Chrome vs Safari）之间，某些特殊按键的 `keyCode` 或 `key` 值可能存在差异。使用本工具可以：
- 即时调试： 无需编写控制台日志，直接在页面上查看所有属性。
- 验证兼容性： 测试媒体键（音量、播放）、功能键（F1-F12）在当前环境下的表现。
- 优化交互： 通过查看 `event.code` 确保你的网页应用支持各种语言布局的键盘。
安全与隐私说明
WebUtils 键盘检测器完全在本地运行。您的每一次按键操作仅被当前页面的 JavaScript 捕获并显示，**绝不会**被上传到任何服务器或记录到外部数据库。您可以放心测试任何按键组合。