contenteditable="true"点不动、输不进字，主因是元素不可聚焦或交互被CSS拦截：需显式加tabindex="0"，排除pointer-events:none、user-select:none等样式限制，并避免父级设contenteditable="false"。
contenteditable 属性开启后为什么点不动、输不进字
直接写 contenteditable="true" 不等于就能编辑——常见原因是元素默认被 CSS 锁定交互，比如 pointer-events: none、user-select: none，或父级设置了 overflow: hidden 且裁剪了焦点区域。更隐蔽的是：空的 <div contenteditable> 在某些浏览器（如 Safari）里首次点击不触发 focus，需加 tabindex="0" 才能被键盘聚焦。
- 务必检查 computed styles 中是否禁用了 pointer 或 selection
- 对空容器，加上
tabindex="0"并确保有初始文本（哪怕一个空格 - 避免在
contenteditable元素上设置white-space: nowrap+overflow: hidden，这会导致光标不可见、输入被截断
如何监听内容变化而不依赖 input 或 keyup
input 事件在 contenteditable 上兼容性差（IE/Edge 旧版不触发），keyup 漏掉粘贴、拖拽、格式刷等操作。真正可靠的方案是监听 mutationobserver，监控 DOM 子节点或文本节点变更。
- 用
MutationObserver观察characterData: true和subtree: true，覆盖所有编辑来源 - 避免监听整个 body；只观察目标元素，否则性能爆炸
- 注意防抖：连续打字会触发多次 mutation，建议用
setTimeout合并回调
const observer = new MutationObserver(() => {
console.log('内容已变:', el.innerText);
});
observer.observe(el, { childList: true, characterData: true, subtree: true });
粘贴富文本时怎样过滤样式、保留段落结构
用户 Ctrl+V 粘贴 Word 或网页内容，常带一堆 <span style="color:red"> 和冗余 class，但直接清空 innerHTML 会丢失换行、列表、标题语义。正确做法是在 paste 事件中拦截，用 event.clipboardData.getData('text/html') 拿原始 HTML，再用 DOMParser 清洗。
- 优先提取纯文本 fallback：
event.clipboardData.getData('text/plain') - 若需保留结构，用正则或 DOM 遍历移除
style、class，但保留<p>、<ul>、<h2>等语义标签 - 禁止直接
el.innerHTML = html—— 可能执行 script 或触发 XSS，必须用DOMParser解析后再 append
移动端 iOS 上 focus 失效、软键盘不弹出
iOS Safari 对 contenteditable 的 focus 控制极严：非用户手势触发的 .focus() 无效；空元素、position: fixed、或在 transform 容器内都可能导致软键盘拒弹。最稳解法是用 click 事件 + 延迟 focus，并确保元素可滚动、有明确尺寸。
- 绑定
click（不是touchstart）后，用setTimeout(() => el.focus(), 0) - 给元素设
min-height: 1em和padding，避免渲染为“不可点击区域” - 移除父级的
-webkit-overflow-scrolling: touch，它和contenteditable冲突严重
复杂点在于：不同 iOS 版本对 contenteditable 的支持策略不一致，测试必须覆盖 iOS 15–17，且不能只看模拟器——真机软键盘行为差异极大。
