怎么利用 KeyboardEvent.code 屏蔽 HTML 编辑器中系统默认的快捷键冲突-html教程-PHP中文网

keyboardevent.code 更适合屏蔽快捷键，因其反映物理按键位置（如"keya"），不受布局、大小写、输入法或caps lock影响；而key返回实际字符，在组合键中不稳定，尤其中文输入法下可能失效。

怎么利用 keyboardevent.code 屏蔽 html 编辑器中系统默认的快捷键冲突

为什么 `KeyboardEvent.code` 比 `KeyboardEvent.key` 更适合屏蔽快捷键

因为 code 反映的是物理按键位置（如 "KeyA"、"ControlLeft"），不受键盘布局、大小写、输入法或 Caps Lock 影响；而 key 返回的是实际输入字符（如 "a" 或 "A"），在 Ctrl+A、Cmd+Z 等组合键中会不稳定，尤其在中文输入法激活时可能返回 "Process" 或空字符串，导致拦截失效。

编辑器需精确识别「用户按下了 Control 键 + A 键」这个物理动作，而非「当前想输入什么字符」——所以优先用 code 做判断，再结合 ctrlKey / metaKey 等修饰键状态。

如何在 `keydown` 中精准拦截 Ctrl/Cmd+A、Ctrl/Cmd+Z 等默认行为

必须在 keydown 阶段拦截，不能等到 keypress 或 input：前者能捕获所有组合键（包括无字符输出的快捷键），后者已被浏览器部分处理，preventDefault() 可能无效。

监听编辑器容器（如 contenteditable 元素或富文本编辑器根节点）的 keydown 事件，而非 document 全局监听，避免误伤其他区域

只对满足「修饰键按下 + 特定功能键」的组合调用 event.preventDefault()，例如：

if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
  event.preventDefault();
  // 执行自定义全选逻辑
}

注意区分 ControlLeft 和 ControlRight：Mac 上 Cmd 键对应 MetaLeft，Windows/Linux 对应 ControlLeft，但用户可能用任意一侧，所以统一用 ctrlKey 或 metaKey 判断，不硬编码具体 code

常见冲突快捷键的 `code` 组合与兼容性陷阱

不同系统下同一快捷键的 code 一致，但修饰键标识不同，容易漏判：

BrandCrowd

BrandCrowd是一款面向品牌创建的在线 Logo 设计和营销素材生成工具。

下载

Ctrl+A / Cmd+A → event.code === 'KeyA' + (event.ctrlKey || event.metaKey)
Ctrl+Z / Cmd+Z → event.code === 'KeyZ'，但注意 Safari 在 contenteditable 中对 Cmd+Z 的 keydown 触发较晚，有时需同时监听 beforeinput 做兜底
Ctrl+Backspace → 实际触发的是 event.code === 'Backspace'，不是 Delete；别和 Ctrl+Delete（删除单词）混淆
方向键（ArrowUp 等）在编辑器中常被用于光标导航，若自定义了代码块跳转逻辑，需明确是否允许原生行为——别一概 preventDefault()

特别注意：Firefox 在某些版本中对 Ctrl+Shift+Tab 的 code 返回 "Tab" 而非预期值，此时要补上 event.shiftKey 判断，不能只信 code。

为什么不能只靠 `event.preventDefault()` 就完事

阻止默认行为只是第一步。很多编辑器（如 Slate、ProseMirror）内部有命令调度机制，或者依赖 MutationObserver 响应 DOM 变化；单纯拦截后若不手动触发对应逻辑（比如全选、撤销），用户会感觉「按键没反应」。

拦截 Ctrl+A 后，应立即调用 window.getSelection().selectAllChildren(editorRoot) 或编辑器提供的 API（如 editor.select()）
拦截 Ctrl+Z 后，必须调用你自己的撤销栈逻辑，否则用户无法回退
某些快捷键（如 Enter）在 contenteditable 中会插入 <div></div>，但你的编辑器可能需要插入 <p></p> ——这时 preventDefault() 后得手动插入正确结构