contenteditable="true"需配合tabindex="0"才能可靠编辑，仅设contenteditable无效；必须显式写合法值，父级false会覆盖子级true；读取用textContent或innerHTML（需清洗），监听用input事件，光标定位需手动构造Range。
加 contenteditable="true" 不等于能编辑，漏掉 tabindex 或父级锁死，点上去照样没反应。
必须显式写 contenteditable="true"，别用简写或非常规值
写成 contenteditable（无等号无值）、contenteditable="on" 或 contenteditable="1" 都不可靠。Firefox 和 Safari 会忽略这些，退化为 inherit，结果可能意外继承父级的 false 而失效。
只认四个合法值："true"、"false"、"inherit"、空字符串（等价于 true，但不推荐）。稳妥做法是统一显式写：contenteditable="true"。
- 父容器若设了
contenteditable="false"，子元素即使写contenteditable="true"也无效——“就近false优先”规则强制生效 - 避免和
user-select: none、pointer-events: none等 CSS 同时使用，它们会直接拦截鼠标交互 - 不要在
shadow DOM内部或iframe的document.designMode === "on"环境下依赖它，行为不稳定
非表单元素默认不能键盘聚焦，必须加 tabindex="0"
div、p、span 这类元素没有原生焦点能力，contenteditable="true" 不会自动赋予 tabindex。没焦点，Ctrl+B、document.execCommand、甚至 Selection API 全部失效。
立即学习“前端免费学习笔记（深入）”；
补上 tabindex="0" 是最简单有效的解法：它让元素进入标准 Tab 键盘导航流，同时支持 el.focus() 主动聚焦。
-
tabindex="-1"只允许 JS 聚焦，无法用键盘到达，适合“仅鼠标触发”的场景 - 漏掉这步，用户点鼠标能输字，但快捷键、复制粘贴响应、光标精确定位都会出问题
- 移动端部分浏览器（如 iOS Safari）对无
tabindex的contenteditable元素点击后不唤起软键盘
内容读取别用 value，textContent 和 innerHTML 各有适用场景
可编辑元素没有 value 属性。强行读 el.value 得到的是 undefined，这是新手最常踩的坑。
textContent 拿纯文本，适合校验长度、存摘要、做搜索；innerHTML 拿带格式的 HTML，但浏览器会插入冗余标签（比如 Chrome 回车插 <div></div>，Firefox 插 <br>），还可能混入 XSS 风险节点。
- 上线前必须清洗：
DOMPurify.sanitize(el.innerHTML)是首选；正则简单过滤可用el.innerHTML.replace(/<\/?[^>]+>/g, '')去标签，或.replace(/<br>/gi, '\n')统一换行 - 监听改用
input事件而非blur，前者覆盖输入、删除、粘贴全路径，实时性更好 - 避免在 Vue/React 中用
v-html或innerHTML动态重写内容——会清空光标位置，需配合MutationObserver或手动恢复
光标不会自动停在末尾，不手动构造 Range 就会跳开头
调用 el.focus() 只是让元素获得焦点，光标落点由浏览器默认策略决定：可能卡在第一个文本节点开头、空 <p></p> 后崩溃、或沿用上次 selection 缓存——完全不可控。
真要定位，得手动创建 Range 并注入 Selection：
- 内容为空时，先插入一个
（零宽空格），否则range.selectNodeContents(el)会失败 - 双击启用场景，可用
document.caretPositionFromPoint(e.clientX, e.clientY)（Chrome/Firefox）获取点击处精确位置 - 切换
contenteditable状态前，建议先清理 DOM：el.innerHTML = el.textContent || ''，避免嵌套空标签干扰 range 构造
这些细节在桌面端尚可调试，到了移动端或跨浏览器协作场景，光标错位、粘贴异常、回车行为分裂会立刻暴露出来——不是“能用就行”，而是“每个环节都得亲手管住”。
