根本原因是移动端浏览器（尤其是ios safari）对focus()响应更保守，光标常卡在开头、不响应range.collapse(false)甚至不显示；需分两步确保dom渲染就绪并用getselection().getrangeat(0)修正定位。
contenteditable 光标定位在移动端和桌面端为什么表现不一致
根本原因是移动端浏览器（尤其是 iOS Safari）对 focus() 的响应更保守：元素获得焦点后，光标常卡在开头、不响应 range.collapse(false)、甚至完全不显示。这不是 JS 没执行，而是 DOM 尚未完成渲染或输入法上下文未就绪。
实操建议必须分两步走：
- 确保
contenteditable="true"已写入 DOM 且元素已渲染（用requestAnimationFrame或setTimeout(() => {}, 0)延迟操作，比transitionend更可靠） - 避免依赖
document.caretPositionFromPoint()—— 它在 iOS Safari 中返回null；改用window.getSelection().getRangeAt(0)获取当前选区，再做修正 - 对空内容的兜底：先插入一个
（零宽空格），再range.selectNodeContents(el)+range.collapse(false)，否则 iOS 下selectNodeContents可能返回空 range
粘贴时富文本样式怎么跨端统一清洗
复制自微信、钉钉、Word 的内容，在 Android Chrome 和 iOS Safari 中的 clipboardData.getData('text/html') 返回结构差异极大：iOS 常只带 text/plain，Android 则可能混入 <meta> 或内联 style。直接删标签正则会漏掉注释、CDATA 和 XSS 风险属性。
安全清洗必须用 DOMParser，且白名单要细粒度控制：
- 优先取
event.clipboardData.getData('text/html')；若为空或解析失败，再 fallback 到text/plain，并做.replace(/\u200b|\u00ad/g, '') - 用
new DOMParser().parseFromString(html, 'text/html')解析，遍历body子节点，只保留p、br、strong、em、ul、ol、li、a（仅保留href） - 对每个块级节点（如
p）末尾手动追加\n，避免段落合并；别用innerText提取，它丢换行语义 - 插入时不用
execCommand—— 它在 iOS Safari 完全失效，且无视光标位置；改用getSelection().getRangeAt(0).deleteContents()+range.insertNode(textNode)
Vue/React 中 v-html 或 innerHTML 更新后光标丢失怎么救
框架用 v-html 或 innerHTML = newHtml 替换内容时，整个子树被销毁重建，原有 Range 引用的节点全部失效，光标必然重置到开头或消失。这不是 bug，是 DOM 更新机制决定的。
不能靠“更新完再 focus”，必须提前保存 + 精准恢复：
- 在更新前用
window.getSelection()记录startContainer和startOffset，但注意：若容器是div，startContainer可能是其子textNode，该节点更新后即不存在 - 更稳的方式是记录“字符偏移量”：用
el.textContent当前值 +selection.getRangeAt(0).startOffset推算光标前有多少字符，更新后从头遍历文本节点累加长度，找到对应位置再构造Range - 若内容为空或结构极简，直接 fallback 到末尾：插入
→range.selectNodeContents(el)→range.collapse(false)→sel.removeAllRanges(); sel.addRange(range)
为什么禁用 contenteditable 后双击还能触发编辑
常见错觉是设了 contenteditable="false" 就万事大吉，但实际中用户仍能双击进入编辑——因为没关掉 user-select 和 ::selection 样式，导致浏览器在禁用状态下仍允许 selection 创建，进而使后续 focus() 或点击意外激活编辑。
必须组合封锁：
- 显式写
contenteditable="false"（别写成"off"或"0"，这些值无效） - CSS 加
user-select: none和[contenteditable="false"]::selection { background: transparent } - 监听
mousedown或dblclick，对禁用状态调event.preventDefault()，防止 selection 被建立 - 切换回
true前，务必先清空冗余结构：el.innerHTML = el.textContent || ''，否则残留的空<p></p>或零宽字符会让新Range无法 collapse
setTimeout，也要在操作前再 check 一次 el.offsetParent !== null && getComputedStyle(el).display !== 'none'；而粘贴清洗最易忽略的，是不同平台剪贴板格式的 fallback 顺序和零宽字符清理。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
