跨浏览器快捷键需区分key（语义键值）与code（物理按键）：功能型快捷键（如Ctrl+S）用key，布局无关型（如方向键、WASD）用code，并处理输入法、macOS metaKey、浏览器差异等兼容问题。
要编写跨浏览器兼容的快捷键，关键在于区分 key（语义键值）和 code（物理按键），并根据使用场景选择合适属性——功能型快捷键（如“保存”“撤销”）优先用 key，布局无关型快捷键（如“左/右方向键”“F1”）或需严格绑定物理位置时用 code，同时规避浏览器差异与意外触发。
理解 key 与 code 的本质区别
key 表示按键的逻辑含义，受键盘布局、输入法、Shift 状态影响。例如：美式键盘按 Shift + 1，key 是 "!"；法语键盘同位置可能是 "§"；中文输入法下按字母键可能产出汉字，key 就是该字。
code 表示物理按键编号，与键盘布局完全无关。无论语言或 Shift 状态，按键盘最左上角的字母键，code 始终是 "KeyQ"；按右侧数字区的 1 键，code 是 "Digit1"，而主键盘区上方的 1 键也是 "Digit1"（注意：实际中二者 code 不同，前者是 "Numpad1"，后者是 "Digit1"）。
推荐策略：按用途选属性，不混用
✅ 用 key 实现语义快捷键（如 Ctrl+S 保存、Ctrl+Z 撤销）：
- 用户意图明确，与字符意义一致，不受键盘布局干扰（德语用户也习惯 Ctrl+S 保存）；
- 需配合 event.ctrlKey / .metaKey / .shiftKey 判断修饰键；
- 注意过滤掉输入框内触发（避免在 contenteditable 或 input 中误响应）。
✅ 用 code 实现方向控制或硬编码按键（如游戏移动、编辑器光标跳转、F 键功能）：
- 确保“按键盘左边的 A 键”永远触发同一操作，不管用户用的是 QWERTY、AZERTY 还是 Dvorak；
- 特别适合 WASD 移动、ArrowUp/Down 滚动、Esc 关闭模态框等；
- code 值稳定，但需注意部分旧浏览器（IE11 及更早）不支持，可用 keyCode 降级（不推荐新项目）。
避开常见陷阱与兼容细节
⚠️ 不要监听 keydown 后立即处理所有 key：
- 某些组合键（如 Ctrl+Space、Alt+Tab）被系统拦截，浏览器收不到或只发一次；
- 输入法激活时（尤其中文），keydown → keyup 期间可能插入多个 compositionstart/compositionend，导致 key 值异常（如显示为 "Process"）；建议加 event.isComposing === false 判断。
⚠️ macOS 上 Cmd 键对应 metaKey，不是 ctrlKey：
- 正确写法：if ((e.ctrlKey || e.metaKey) && e.key === 's') { ... }；
- 避免只写 e.ctrlKey，否则 macOS 用户无法触发 Ctrl+S（实为 Cmd+S）。
⚠️ 某些键的 key/code 值存在浏览器差异：
- 如 CapsLock 在 Chrome 中 key 是 "CapsLock"，Firefox 中是 "Dead"（已废弃），Safari 可能为空；
- 推荐对特殊功能键（CapsLock、NumLock、ScrollLock）统一用 code 判断（e.code === "CapsLock"）更可靠。
一个轻量兼容示例（ES6+）
// 监听 Ctrl/Cmd + S 保存，且不在可编辑元素内触发
function handleSave(e) {<br>
if (e.key !== 's' || !(e.ctrlKey || e.metaKey) || e.isComposing) return;<br>
if (['INPUT', 'TEXTAREA', 'SELECT', 'CONTENTEDITABLE'].some(tag =><br>
e.target.matches(tag) || e.target.hasAttribute('contenteditable')))<br>
return;<br>
e.preventDefault();<br>
doSave();<br>
}<br>
document.addEventListener('keydown', handleSave);
// 监听物理方向键（不依赖布局，不响应输入法）
function handleArrow(e) {<br>
if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) return;<br>
if (e.isComposing) return;<br>
e.preventDefault();<br>
moveCursor(e.code); // 如：'ArrowLeft' → 光标左移<br>
}<br>
document.addEventListener('keydown', handleArrow);
