JavaScript 键盘事件原理

在 Web 开发中，处理键盘输入是常见的需求。现代浏览器通过 KeyboardEvent 对象提供了多种属性来识别用户按下的键。

event.key: 表示按键产生的字符值。例如按下 "a" 键，值为 "a"；如果按住 Shift 再按，值为 "A"。它是处理文本输入的推荐属性。
event.code: 表示物理按键的代码。无论键盘布局如何（QWERTY 或 DVORAK），同一个物理位置的键代码是固定的。例如左侧的 Shift 键总是 ShiftLeft。
event.which / keyCode:已废弃的属性，返回一个数字编码。虽然不再推荐使用，但由于大量的旧代码库兼容性需求，仍然被广泛查询。
Modifiers: ctrlKey, shiftKey, altKey, metaKey 等布尔值，用于判断是否有修饰键同时被按下。

开发应用场景

使用 event.code 可以确保无论玩家使用何种语言的键盘布局，WASD 方向键的物理位置始终不变。

结合 event.key 和修饰键属性（如 Cmd+S 或 Ctrl+C）来实现复杂的应用快捷键逻辑。

监听 Enter 键提交表单，或监听 Escape 键关闭模态框，提升用户体验。

在数字输入框中，通过判断 keyCode 禁止输入非数字字符（虽然现在通常用 input type="number" html5 属性替代）。

为什么 event.which 和 keyCode 被废弃了？

因为它们在不同的浏览器和操作系统中表现不一致，且对非拉丁字符集的支持很差。现代标准推荐使用 key 和 code。

如何区分左 Shift 和右 Shift？

使用 event.code 属性。左 Shift 返回 ShiftLeft，右 Shift 返回 ShiftRight。

event.key 和 event.code 有什么区别？

event.key 代表按键生成的字符（受键盘布局影响），而 event.code 代表物理按键位置（不受键盘布局影响）。

Meta 键在 Windows 上是什么？

在 Windows 键盘上，Meta 键通常对应 "Windows徽标键" (⊞)。在 Mac 上对应 "Command" (⌘) 键。

什么是 event.location？

它是一个数字，表示按键的位置。0=标准键，1=左侧修饰键，2=右侧修饰键，3=小键盘区(Numpad)。

如何阻止按键的默认行为？

在事件处理函数中调用 event.preventDefault()。例如阻止 F5 刷新或空格键滚动页面。

手机软键盘支持吗？

Android 和 iOS 的软键盘对 keyCode 的支持很不好，经常返回 0 或 229（表示正在输入法编辑器中处理）。

Enter 键的代码是多少？

Enter 键的 keyCode 是 13，code 是 "Enter"，key 是 "Enter"。