iOS Webview 存在光标偏移、被遮挡或移出屏幕的固有缺陷,uni-app 不修复但可绕过:需手动 scrollIntoView、避免 transform 干扰、用 nextTick+setTimeout 确保 ref 可用、textarea 需手动控高并防 flex/height 干扰、不同 iOS 版本行为不一致需兼容处理。

iOS 上 input 或 textarea 聚焦后光标位置偏移、键盘顶起页面后光标被遮挡、甚至跑到屏幕外——这不是你样式写错了,是 iOS Webview 的固有渲染缺陷,uni-app 本身不修复它,但你可以绕过去。
iOS input/textarea 聚焦时页面未滚动到可视区
原生 Webview 在软键盘弹出时,不会自动 scrollIntoView,尤其在 fixed 定位的表单、页面有 transform 或 overflow: hidden 的父容器里,光标极易“消失”。
- 手动触发
scrollIntoView({ behavior: 'smooth', block: 'nearest' }),但需确保目标元素已渲染且无 transform 干扰 - 避免对
input父级使用transform: translateZ(0)或will-change: transform,这会让 iOS 渲染层错乱,光标坐标计算失准 - 聚焦前加
setTimeout(() => el.scrollIntoView(...), 100),等键盘开始动画再滚动(iOS 键盘弹出约 200ms,100ms 是较稳妥的时机)
uni-app 中使用 focus() 后光标仍错位的常见原因
uni-app 的 input 组件在 iOS 下会透传为原生 <input>,但生命周期钩子和 ref 获取时机容易出问题。
-
onReady阶段 ref 可能还未绑定,应改用nextTick+setTimeout双保险获取 DOM - 不要在
v-if切换后立刻focus(),确保节点已插入 document(可用document.contains(el)校验) - 如果用了
uni.createSelectorQuery(),必须调用exec()且等待回调,不能直接取query.select(...).fields
textarea 在 iOS 上光标跳到首行或高度异常
textarea 动态高度适配 + iOS 键盘弹出会触发两次 resize,导致光标重置。uni-app 的 auto-height 属性在 iOS 下不可靠。
- 禁用
auto-height,改用手动控制:监听input事件,用scrollHeight设置style.height,并加min-height防止坍缩 - 聚焦前先设置
textarea.style.height = 'auto',再offsetHeight强制重排,再设回真实高度 - 避免在
textarea外层套flex: 1或height: 100%,iOS 会错误计算内容高度,导致光标定位失效
最麻烦的不是代码怎么写,而是 iOS 不同版本对 position: fixed + input 的处理逻辑不一致——iOS 15.4 修复了部分光标偏移,但又引入了键盘收起后页面不回落的问题。建议所有表单页都加 page-meta 的 setScrollTop 监听,并在 blur 后主动 scrollTo({scrollTop: 0}) 保底。


















