需监听focus事件，先获取光标range并判断是否被遮挡，再滚动父容器而非元素自身；ios需微任务等待渲染后构造range，android降级用window.innerheight计算视口；viewport必须设height=device-height且禁用user-scalable=no。
contenteditable 元素 focus 后光标被软键盘盖住怎么办
直接调 scrollIntoView 通常无效——contenteditable 元素不触发标准表单聚焦行为，iOS Safari 甚至不会在 focus 时更新 visualViewport.height，导致滚动时机错判。核心不是“滚不滚”，而是“什么时候滚、滚谁”。
- 必须监听
focus事件，但不能只对contenteditable元素本身调scrollIntoView；它可能没渲染出实际高度，或内部Range还未就位 - 更可靠的做法：在
focus回调里，先用getSelection().getRangeAt(0)获取当前光标位置的Range，再取其getBoundingClientRect()的bottom值，对比visualViewport?.height判断是否被遮挡 - 若被遮挡，调用
range.commonAncestorContainer.parentElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })，而非元素自身——父容器往往有明确布局上下文，滚动更可控 - Android WebView 中
visualViewport支持弱，fallback 到window.innerHeight+document.documentElement.scrollTop计算视口底部位置
为什么 contenteditable 在 iOS 上双击后光标总跳到开头
这不是 bug，是浏览器默认行为：双击触发 contenteditable="true" 时，DOM 尚未完成重排，getSelection() 返回空或过期 Range，后续 focus() 只能 fallback 到首个文本节点起始处。
- 必须在
contenteditable属性设置后，加一层微任务等待渲染：setTimeout(() => { /* 构造 Range */ }, 0)或监听transitionend（如果用了 CSS 过渡） - 定位光标前，先用
document.caretPositionFromPoint(x, y)（Chrome/Firefox）或document.caretRangeFromPoint(x, y)（Safari）获取点击点对应的node和offset，比依赖 selection 更准 - 若点击位置为空白行或末尾，
caretPositionFromPoint可能返回null，需 fallback：先range.selectNodeContents(el)，再range.collapse(false)，且确保 el 内至少有一个（零宽空格）
移动端 fixed 底部 contenteditable 输入框 + 软键盘的定位陷阱
设 position: fixed; bottom: 0 看似简单，但在 iOS 上，键盘弹出会压缩 visualViewport，但 fixed 元素并不自动上移——它仍锚定在“屏幕底部”，而非“可视区域底部”。
- 别用
adjust-position="false"（仅微信小程序支持），H5 里无效 - 监听
visualViewport?.addEventListener('resize', ...)，但 Android 大部分 WebView 不支持，必须降级为监听window.addEventListener('resize', ...)+ 防抖（200ms） - 计算键盘高度时，用
visualViewport?.height（iOS 16.4+）或window.innerHeight - document.documentElement.clientHeight（Android fallback），注意后者在页面有横向滚动时不准 - 动态改
bottom值时，不要直接写style.bottom = height + 'px'，而应通过 CSS 变量 +:root更新，避免内联样式污染和重排开销
Vue/React 中 contenteditable 动态更新后光标丢失的根源
框架用 v-html 或 dangerouslySetInnerHTML 替换内容时，DOM 节点被完全销毁重建，之前 Range 对象引用失效，getSelection() 返回空。这不是框架问题，是 DOM 生命周期使然。
- 禁止直接替换整个 innerHTML；改用
textContent提取纯文本，再用insertAdjacentText('beforeend', ...)增量插入 - 若必须保留 HTML 结构，先缓存当前光标位置：
const range = getSelection().getRangeAt(0); const pos = { node: range.startContainer, offset: range.startOffset }，更新后再用range.setStart(pos.node, pos.offset)恢复 - 在 Vue 中，
v-model绑定contenteditable会引发无限循环（input → 更新 → 重新渲染 → 光标丢失），应改用@input+textContent手动同步 - Safari 下
removeAllRanges()必须在addRange()前显式调用，否则新 range 不生效
光标定位和软键盘遮挡在 contenteditable 场景下从来不是孤立问题：viewport 配置错一个参数，JS 定位就全失效；DOM 更新少一步缓存，光标就永远找不回来。真正卡住人的，往往是这些跨层耦合点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
