KeyCode.info 键盘事件类型完全解析：key、code、which、location的区别

【免费下载链接】keycodes Easy visualizer for JavaScript KeyCodes 项目地址: https://gitcode.com/gh_mirrors/ke/keycodes

KeyCode.info 是一款直观的 JavaScript 键盘事件可视化工具，能够帮助开发者轻松获取按键对应的 key、code、which 和 location 等事件属性。本文将深入解析这些属性的区别与应用场景，让你彻底掌握键盘事件处理的核心知识。

一、什么是 JavaScript 键盘事件？

在网页开发中，键盘事件是用户与页面交互的重要方式之一。当用户按下、释放或按住键盘上的按键时，浏览器会触发相应的事件。KeyCode.info 通过直观的界面展示了这些事件的详细属性，如 lib/constants/site-copy.ts 中定义的 eventKey、eventCode、eventLocation 和 eventWhich 等核心属性。

二、event.key：用户按下的字符

event.key 属性返回用户按下的实际字符，它会考虑键盘布局、Shift 键状态等因素。例如：

• 按下 "A" 键，event.key 返回 "a"（小写）
• 按住 Shift 键再按 "A"，event.key 返回 "A"（大写）
• 按下空格键，event.key 返回 " "（空格字符）

这个属性最接近用户实际输入的内容，适合用于处理文本输入相关的场景。

三、event.code：物理按键的编码

event.code 属性返回按键的物理位置编码，与键盘布局无关。例如：

• 无论键盘布局如何，字母区第一行最左侧的按键 event.code 始终是 "KeyQ"
• 右侧数字键盘的 "1" 键 event.code 是 "Numpad1"，而主键盘的 "1" 键是 "Digit1"

这个属性适合用于处理快捷键，如 test/e2e/keycode.e2e.test.ts 中通过按键编码来测试不同键盘事件的场景。

四、event.which：传统的键码值

event.which 是一个历史遗留属性，返回按键的 ASCII 码值。例如：

• 按下 "A" 键，event.which 返回 65
• 按下 "a" 键，event.which 同样返回 65（不区分大小写）

虽然现代浏览器仍支持这个属性，但建议优先使用 event.key 和 event.code。在 test/e2e/lib/helpers.ts 中可以看到如何通过 event.which 获取键码值。

五、event.location：按键的位置信息

event.location 属性返回按键在键盘上的位置，对于区分相同字符的不同按键非常有用。例如：

• 主键盘的 "Shift" 键 event.location 是 1
• 右侧 "Shift" 键 event.location 是 2
• 数字小键盘的按键 event.location 是 3

这个属性在处理快捷键时特别有用，可以区分左右 Ctrl、Alt 等按键。

六、如何选择合适的键盘事件属性？

• 处理文本输入：优先使用 event.key
• 实现快捷键：优先使用 event.code
• 区分左右按键：使用 event.location
• 兼容性处理：可考虑 event.which，但建议逐步迁移到新标准

KeyCode.info 提供了直观的方式来查看这些属性，如 test/e2e/seo.e2e.test.ts 中所述，你可以按下任意键，立即获取该键的 event.key、event.code、event.which 和 event.location 等信息。

七、总结

掌握键盘事件的 key、code、which 和 location 属性对于开发交互友好的网页应用至关重要。KeyCode.info 作为一款强大的可视化工具，能够帮助开发者快速了解和测试各种键盘事件属性，是前端开发的得力助手。通过本文的解析，相信你已经对这些属性有了清晰的认识，可以在实际项目中灵活运用了。

【免费下载链接】keycodes Easy visualizer for JavaScript KeyCodes 项目地址: https://gitcode.com/gh_mirrors/ke/keycodes