contenteditable元素出现html标签污染是因为浏览器默认保留粘贴的富文本格式，直接插入、甚至片段，这是其原生设计目标；需用beforeinput事件拦截（e.inputtype === 'insertfrompaste'）并preventdefault()，再手动提取纯文本插入，同时辅以input事件兜底清洗。
contenteditable 元素为什么会出现 HTML 标签污染
用户粘贴时浏览器默认保留富文本格式，contenteditable 会直接插入 <strong></strong>、<span style="color:red"></span> 甚至 <script></script> 片段。这不是 bug，而是该属性的原始设计目标就是支持富文本编辑。
用 beforeinput + event.preventDefault() 拦截富文本粘贴
这是目前最可靠、兼容性较好（Chrome 62+、Firefox 79+、Safari 16.4+）的方案。关键在于识别粘贴动作并阻止默认行为，再手动提取纯文本：
-
beforeinput事件在输入发生前触发，且event.inputType === 'insertFromPaste'可精准判断是粘贴 - 调用
event.preventDefault()阻止原生粘贴，再用navigator.clipboard.readText()或event.clipboardData?.getData('text/plain')获取纯文本 - 手动插入纯文本：用
document.execCommand('insertText', false, plainText)（已弃用但仍有效），或更现代的getSelection().getRangeAt(0).insertNode(document.createTextNode(plainText))
示例片段：
element.addEventListener('beforeinput', (e) => {
if (e.inputType === 'insertFromPaste') {
e.preventDefault();
const plainText = e.clipboardData?.getData('text/plain') || '';
document.execCommand('insertText', false, plainText);
}
});
用 input 事件 + innerText 替换 innerHTML 清洗残留
拦截不是万能的——用户可能拖拽 HTML 文件进来、用快捷键格式化文本、或浏览器不支持 beforeinput。所以必须加一层兜底清洗：
- 监听
input事件，每次内容变化后立即执行清洗 - 不要用
textContent（会清空子节点结构，破坏光标位置），而要用innerText读取渲染后纯文本，再赋值回innerText—— 这会强制丢弃所有标签和样式 - 注意副作用：这会导致光标跳到末尾，需用
getSelection()和range手动保存/恢复位置（复杂点就在这里）
简易清洗（无光标保持）：
element.addEventListener('input', () => {
element.innerText = element.innerText;
});
为什么不能只靠 CSS user-select 或 pointer-events
这些样式只是禁用选择或点击，对 contenteditable 的输入行为完全无效。同样，designMode = 'off' 或移除 contenteditable 属性会直接失去编辑能力，不是“限制”，而是“关闭”。真正要的是“可编辑但仅限纯文本”——这个边界必须由 JS 主动控制，没有声明式捷径。
最易被忽略的点：移动端 Safari 对 beforeinput 支持滞后，且长按粘贴菜单行为不可控，必须依赖 input 事件兜底；另外，execCommand 在新版本 Chrome 中已标记为废弃，但尚无标准替代方案，暂时只能继续用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
