contenteditable跨端兼容性差是真实存在的问题，核心矛盾在于各内核对光标定位、回车换行、粘贴过滤等默认处理逻辑差异大；iOS Safari需用beforeinput拦截insertLineBreak并手动插，Android WebView旧版本需keydown降级，Firefox空行判断须用innerHTML正则清洗后判空，且所有方案仍需依赖已废弃但目前唯一可靠的document.execCommand兜底。
contenteditable 在跨端（iOS Safari、Android WebView、Chrome、Firefox、Edge）表现不一致是真实存在的问题，不是“基本可用”，而是“处处要填坑”。核心矛盾在于：不同内核对编辑行为的默认处理逻辑差异太大，比如光标定位、回车换行、粘贴过滤、撤销栈管理、空行渲染等，根本没法靠 CSS 或 JS 兜底。
移动端 iOS Safari 的回车换行必须手动拦截
iOS Safari 默认把 <div contenteditable="true"> 中的回车转成 <div></div>，而其他浏览器用 <br>。这会导致样式错乱（<div> 有 margin/padding）、光标跳到段首、甚至触发意外的 block 合并。你不能依赖 document.execCommand 或监听 keydown 然后 preventDefault() 就完事——iOS 15+ 对 preventDefault() 在 input 或 compositionend 之后的行为极其敏感，容易卡死输入法。
- 真正有效的做法是在
beforeinput事件中判断inputType === 'insertLineBreak'，然后立即event.preventDefault()，再手动插入<br>节点 - 注意：必须用
insertAdjacentHTML('beforeend', '<br>')，不能用innerHTML += '<br>'，否则会清空选区 - Android Chrome 也认
beforeinput，但旧版 WebView（如 Android 9 内置 WebView）不支持，需降级到keydown+keyCode === 13+setTimeout(() => { ... }, 0)延迟插入
Android WebView 中的粘贴内容被自动过滤
很多 Android 系统 WebView（尤其是定制 ROM 或低版本系统）会主动剥离粘贴内容里的 HTML 标签，只留纯文本。这不是 bug，是 WebView 初始化时默认启用了 setJavaScriptEnabled(false) 或禁用了 DOMPaste 特性导致的。你无法用 paste 事件劫持来修复，因为事件触发时内容早已被净化。
- 解决方案是绕过原生粘贴：监听
paste事件 →event.preventDefault()→ 用event.clipboardData.getData('text/html')尝试取 HTML；若为空，再 fallback 到'text/plain' - 关键点：Android WebView 80+ 才支持
text/html，低于此版本必须用document.execCommand('insertText', false, plainText)插入，且要手动维护光标位置（getSelection().getRangeAt(0)） - 不要信任
event.clipboardData.types数组顺序，某些华为/小米 WebView 会把'text/plain'排在前面，即使你复制的是带格式内容
PC 端 Firefox 对空行和 focus 的处理最不可靠
Firefox 在 contenteditable 元素首次获得焦点时，如果内容为空，会自动插入一个 <br>；但用户删掉它后，再次聚焦又可能再插一个。更糟的是，当元素内只有空白字符（ 或空格）时，textContent.trim() === '' 返回 true，但 innerText 可能返回换行符，导致状态判断失准。
立即学习“前端免费学习笔记（深入）”；
- 统一用
element.innerHTML.replace(/<[^>]+>| |\s/g, '').length === 0判断是否真为空，而不是依赖textContent - focus 时若检测到仅含
<br>，立刻用element.innerHTML = ''清空，并调用document.execCommand('selectAll', false, null)+document.execCommand('delete', false, null)避免残留 - Firefox 不支持
beforeinput的insertFromPaste类型，所以粘贴逻辑必须单独用paste事件处理，且不能依赖inputType
最易被忽略的一点：所有跨端兼容方案都依赖对 document.execCommand 的持续降级兜底。它虽已被标记为 deprecated，但截至 2026 年，仍是唯一能在 iOS 14–17、Android 8–13、Firefox 115+ 上保持行为一致的命令执行接口。别指望 InputEvent 或 CompositionEvent 能覆盖全部场景——它们在低端 Android 和旧版 Safari 上缺失严重，且事件触发时机与 DOM 更新不同步。
