最稳方式是监听input事件并立即校验还原，禁用粘贴富文本、右键、拖放，用textContent而非innerText，配合CSS防选中异常，服务端兜底防绕过。
怎么用 contenteditable 但不让用户乱输
直接限制 contenteditable 区域的输入，浏览器不提供原生白名单机制，得靠监听 + 拦截。最稳的方式是监听 input 事件，拿到变化后立刻校验并还原非法内容——别用 keydown 或 keypress，它们无法捕获粘贴、拖入、语音输入等操作。
- 只允许数字和小数点？检查
event.target.textContent是否匹配/^\d*\.?\d*$/，不匹配就event.target.textContent = prevText - 要限制长度？用
textContent.length > 10判断，超过就截断，别等用户输完再提示 - 注意：iOS Safari 中
input事件在粘贴后可能触发两次，建议加个setTimeout(..., 0)延迟校验，或用getSelection().toString()辅助判断是否真有变化
粘贴进 contenteditable 怎么过滤 HTML 标签
用户 Ctrl+V 粘贴时，浏览器默认带格式，textContent 拿不到原始 HTML，但 clipboardData.getData('text/html') 可以——不过兼容性差；更可靠的是监听 paste 事件，用 getData('text/plain') 强制转纯文本。
- 在
paste事件里调用event.preventDefault()，然后event.clipboardData.getData('text/plain')获取干净字符串 - 想保留换行？把
\n替换成<br>
再插入，但注意innerHTML = cleanText.replace(/\n/g, '<br>')
有 XSS 风险，仅限可信来源 - 别依赖
execCommand('insertText')，它在 Chrome 90+ 已废弃，且在 Firefox 中行为不一致
input 和 textarea 不能满足时，contenteditable 的最小安全配置
开 contenteditable 就等于把 DOM 操作权交出去，不设防等于留后门。必须关掉富文本命令、禁用右键菜单、阻止拖放，否则用户能随意插图、改样式甚至执行脚本。
- 加上
spellcheck="false"和autocorrect="off"避免移动端自动纠错干扰格式 - 禁用右键：绑定
contextmenu事件并preventDefault；禁用拖放：ondragstart="return false"+ondrop="return false" - 关键一步：设置
style="user-select: text; -webkit-user-select: text;"，否则双击选词会失败，影响可访问性
为什么 innerText 比 textContent 更容易出错
innerText 会受 CSS 影响（比如 display: none 的子元素不计入），还会触发重排，性能差；而 textContent 是纯 DOM 树遍历，稳定、快、符合预期。几乎所有输入校验场景都应该用后者。
立即学习“前端免费学习笔记（深入）”；
- 遇到换行显示异常？不是
innerText的问题，是 CSS 里white-space没设对，检查是否漏了white-space: pre-wrap - IE 下
textContent不支持？不用管，IE 已淘汰；如真需兼容，用el.innerText || el.textContent回退即可 - 用
textContent清空内容时，写el.textContent = ''，别用el.innerHTML = ''，后者可能触发事件重绑或资源泄漏
