ios下input光标错位与键盘遮挡的本质原因是webview渲染层坐标计算缺陷:键盘不自动scrollintoview、transform干扰定位、fixed与动画不同步;uni-app通过cursor-spacing和always-embed绕过。

uni-app iOS 下 input 光标错位与键盘遮挡的本质原因
这不是你 CSS 写错了,而是 iOS Webview 渲染层对 input 和 textarea 的坐标计算存在固有缺陷:软键盘弹出时不会自动 scrollIntoView,transform 父容器干扰光标定位,fixed 定位 + 键盘动画不同步导致元素“消失”。uni-app 不修复底层,但提供可落地的绕过路径。
必须加的两个属性:cursor-spacing 和 always-embed
微信小程序(含 uni-app 编译)中,iOS 端 input 和 textarea 必须显式设置:
-
cursor-spacing:指定光标距键盘顶部的距离(单位 px),取值建议80~120。实际生效值是「元素底部到页面底边距离」和该值的较小者,不是绝对偏移量 -
always-embed:强制输入框始终处于同层渲染(仅 iOS 生效),避免 focus 时切到非同层导致坐标错乱、光标跳首行
示例写法:
<input v-model="value" cursor-spacing="100" :always-embed="true">
textarea 在 iOS 下高度与内边距异常的处理
textarea 比 input 更麻烦:iOS 默认带 padding,auto-height 不可靠,且键盘弹出会触发两次 resize 导致光标重置。
- 加
disable-default-padding="true"去掉 iOS 原生内边距 - 禁用
auto-height,改用手动控制高度:监听@input,设style.height = 'auto'→ 强制offsetHeight重排 → 再设为scrollHeight - 外层容器避免
flex: 1或height: 100%,否则 iOS 错误计算内容高度,光标定位失效
页面滚动与安全区适配的联动陷阱
即使加了 cursor-spacing,若表单在 fixed 区域或父容器有 transform,仍会失效。更隐蔽的问题是:
- iPhone X 及后续机型需处理底部安全区:
padding-bottom: env(safe-area-inset-bottom)要配合manifest.json中"safearea": {"bottom": {"offset": "none"}}使用,否则弹窗底部留白或被截断 - 键盘收起后页面不回落(iOS 15.4+ 新问题):需在
@blur后主动调用uni.pageScrollTo({scrollTop: 0})保底 - u-popup 等弹层组件 z-index 不够高时,会被底部
fixed按钮遮挡——务必手动设:z-index="9999",别依赖默认值
最易被忽略的是:iOS 不同版本对 position: fixed + input 的处理逻辑不一致,同一套代码在 iOS 14/15/16 上表现可能完全不同,真机测试不能省。











