contenteditable="true"不能直接当表单用，因其不触发change事件、无value属性、不参与form.submit()；回车/粘贴/撤销时input事件常不触发，尤其safari和移动端；需动态设tabindex、监听paste并过滤html、优先用textcontent取值防xss。
contenteditable="true" 为什么不能直接当表单用
它不产生 change 事件，没有 value 属性，也不参与 form.submit() 数据收集。用户按回车、粘贴富文本、用 Ctrl+Z 撤销时，input 事件大概率不触发——尤其在 Safari 和移动端 WebKit 内核下。
常见误操作：
- 监听
input却漏掉compositionend，导致中文输入法上屏后内容未同步 - 用
innerHTML直接取值，结果把用户粘贴进来的<script></script>标签也存了，埋下 XSS 风险 - 没加
tabindex="0"，键盘 Tab 无法聚焦，可访问性（a11y）直接掉线
如何安全获取编辑后的内容
别无选择：优先用 textContent，除非你明确需要保留简单格式（比如 <strong></strong> 或换行）。innerHTML 必须过白名单过滤，不能依赖后端兜底。
实操建议：
- 纯文本场景：直接读
el.textContent，最稳，零风险 - 需保留段落/加粗/列表：用
DOMParser解析el.innerHTML，只允许p、br、strong、em、ul/ol/li，剔除所有style、class、on*属性 - 避免在事件回调里反复调用
innerHTML—— DOM 变更可能触发重排，影响性能
粘贴富文本时怎么不崩样式
Word、微信公众号、甚至其他网页复制过来的内容，常带嵌套 span、内联 font-size、冗余 div，直接插入会撑破容器、错乱缩进。
必须拦截并重写粘贴逻辑：
- 监听
paste事件，第一时间e.preventDefault() - 优先走纯文本路径：
e.clipboardData.getData('text/plain')+document.execCommand('insertText', false, text)（虽已废弃，但目前兼容性最广） - 若需保留基础格式，用
e.clipboardData.getData('text/html')，再通过DOMParser清洗，而非信任浏览器原生粘贴行为 - 禁用右键菜单：
oncontextmenu="return false;"，防止用户绕过 paste 控制
光标定位和 focus 失效怎么办
el.focus() 后光标常卡在开头、末尾或不可见节点里，尤其当元素含空 <p></p> 或初始为空时。这不是 bug，是 contenteditable 的默认行为。
真实可用的方案是手动控制 Selection：
- 先清空冗余结构，用纯文本初始化内容，避免
selectNodeContents选中空白节点 - 创建
Range，用range.selectNodeContents(el)后调range.collapse(false)移至末尾 - 在 React/Vue 等框架中，focus 务必放在
requestAnimationFrame回调里，等 DOM 渲染完成再执行 - 移动端 Safari 光标偏移严重，加
role="textbox"提升可访问性识别度，比纯 CSS 更有效
复杂点不在 API 多难，而在每个交互分支都要预设 fallback：中文输入、粘贴、撤销、动态渲染、焦点切换——少覆盖一种，用户就会遇到“光标消失”或“改了但没保存”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
