加了 contenteditable="true" 仍点不动的主因是元素无法获焦，须加 tabindex="0"、检查父级 contenteditable="false" 禁用、CSS 交互禁用及避免误用 span/input。
contenteditable="true" 能让元素变成可编辑区域，但直接加就交由浏览器自由发挥——光标乱跳、回车插 <div> 或 <p>、粘贴带样式甚至 XSS 风险，根本不是“开箱即用”的富文本框。
为什么加了 contenteditable="true" 还是点不动
最常见原因是元素无法获得焦点：原生 <div> 没有 tab 焦点能力，键盘或 el.focus() 都无效。
- 必须显式加
tabindex="0"（哪怕只是临时聚焦） - 检查父级是否设了
contenteditable="false"——该属性“就近 false 优先”，子元素设"true"也无效 - 确认 CSS 没禁用交互：
user-select: none、pointer-events: none、display: contents都会让编辑失效 - 避免用在
<span>或<input>上：<span>光标定位异常，<input>加了也无意义且可能干扰原生行为
怎么安全获取和清洗用户输入内容
innerHTML 直接暴露风险，textContent 又丢格式——得按需选，并主动清洗。
- 纯文本场景：用
el.textContent，它不执行脚本、不渲染标签，适合校验、摘要、后端存 plain text - 需保留简单格式（如换行、粗体）：取
el.innerHTML，但必须过滤——推荐用DOMParser解析后白名单遍历，只留<p>、<strong>、<em>、<ul>/<ol>/<li>，删掉所有style、class和未知标签 - 绝对别用正则替换 HTML 字符串：
innerHTML.replace(/<script.*?>/gi, '')容易漏掉变体或闭合错误，导致 XSS - 若业务允许，粘贴时直接走
event.clipboardData.getData('text/plain')，跳过 HTML 解析更轻量也更安全
如何控制回车、粘贴和中文输入行为
浏览器默认行为几乎都不符合实际需求：回车插标签、粘贴带 Word 样式、中文上屏漏字——全得拦截重写。
立即学习“前端免费学习笔记（深入）”；
- 回车：监听
keydown，对Enter调用e.preventDefault()，再根据需要插入\n（纯文本）或<br>（HTML 场景） - 粘贴：监听
paste，e.preventDefault()后取e.clipboardData.getData('text/plain')或解析'text/html'，再用document.execCommand('insertText', false, text)（虽已废弃但目前最稳）或 Range API 插入到光标位置 - 中文输入：必须监听
compositionstart和compositionend，否则拼音上屏瞬间内容会丢失；input事件在 composition 结束后才触发，不能替代 - 别只靠
input事件：它漏掉execCommand格式操作、拖拽插入、撤销重做；关键场景建议组合input+compositionend+MutationObserver（监听 DOM 变动）
哪些地方容易被忽略但实际致命
真正上线踩坑的往往不是功能有没有，而是边界场景下行为失控：空容器失焦、动态更新后光标消失、移动端拼写干扰、Shadow DOM 不透传……这些不提前处理，用户一用就崩。
- 空
<div contenteditable="true"></div>在 Safari 下点击后焦点会被“吞掉”，后续输入无响应——必须初始化时塞个<br>或设min-height: 1.2em - React/Vue 更新 DOM 后，浏览器常丢失光标位置；每次渲染后需手动用
Range+Selection恢复上次选区 - 移动端要加
spellcheck="false"和autocorrect="off"，否则拼写下划线覆盖文字，视觉混乱 - Shadow DOM 内使用必须显式设置
contenteditable，根节点不会自动继承；且document.execCommand在 Shadow 中基本不可用，必须用现代 Selection API
