如何可靠拦截并取消contenteditable元素的所有输入？

核心思路：多事件兜底+IME状态追踪 #

由于不同浏览器、输入法、移动键盘的行为差异，单一事件无法覆盖所有场景，必须组合多种事件并针对性处理：

1. 优先用beforeInput事件（现代浏览器核心） #

beforeInput是W3C标准的输入前置事件，能直接获取inputType和拟插入的data，是最贴合需求的原生事件：

• 拦截默认行为：调用event.preventDefault()阻止元素内容被原生修改
• 区分操作类型：通过event.inputType识别插入（insertContent/insertText）、删除（deleteContentBackward/deleteWordForward）等动作
• Safari兼容：Safari对部分inputType支持有偏差，需额外判断event.data是否存在，同时监听input事件兜底——当beforeInput未触发时，对比事件前后的内容差异反推操作

2. 补充keydown/keyup处理物理按键场景 #

• 桌面端：处理非IME的物理按键输入（如退格、回车），通过event.key判断操作类型，同时注意event.isComposing状态——IME输入中（如中文输入法选词）时，跳过keydown处理，避免干扰IME流程
• 移动端：部分自定义键盘（如Microsoft Swift Keyboard）的自动补全可能不触发beforeInput，此时可通过keydown捕获按键码，结合元素内容变化做二次校验

3. IME输入的特殊处理 #

监听compositionstart/compositionupdate/compositionend事件：

• compositionstart：标记IME开始输入，忽略其他事件干扰
• compositionupdate：实时获取IME候选内容（event.data）
• compositionend：IME输入结束后，统一处理最终插入内容，同时调用event.preventDefault()阻止原生插入
• 表情输入（win/meta + .）：这类操作会触发beforeInput的insertContent类型，event.data为表情字符，直接拦截处理即可

4. 自定义键盘补全/预测输入处理 #

像Microsoft Swift Keyboard这类自定义键盘的自动补全，可能不触发标准输入事件，此时需要：

• 内容快照对比：记录上一次的元素内容，当内容变化且无对应事件触发时，反推补全内容
• MutationObserver监听：监听元素子节点变化，内容修改时立即触发回调，对比前后内容提取新增/删除部分，再将元素恢复到修改前状态，自行处理输入逻辑

5. 统一内容管控流程 #

无论通过哪个事件捕获到输入，都执行以下步骤：

1. 阻止默认行为（preventDefault()）或恢复元素内容到修改前状态（针对无法阻止默认行为的场景）
2. 提取拟插入/删除的内容或操作类型
3. 自行处理输入逻辑（如验证、格式化、同步到自定义数据模型）

内容的提问来源于stack exchange，提问作者Andrew Rusinas