安卓端设softinputMode为"adjustResize"并置于页面style下可解决键盘遮挡,iOS需监听keyboardHeight配合防抖和延时查节点,input须关闭adjust-position,scroll-view需手动兜底。

pages.json 里配 softinputMode 是安卓端最简起点
安卓上键盘遮挡底部输入框,softinputMode 设成 "adjustResize" 是最快压住问题的手段。它让系统压缩页面视口高度,给键盘腾位置,而不是粗暴“顶飞”整个页面。但必须写在具体页面的 style 节点下,例如:
"style": {
"app-plus": {
"softinputMode": "adjustResize"
}
}
别塞进全局 app-plus 配置里,否则会影响其他页的滚动逻辑。iOS 上这个字段支持不稳定,部分机型(尤其是 iOS 15 以下)可能返回 height: 0 或抖动式变化,不能单独依赖。
input 必须关掉 adjust-position 才能接管控制权
只要用了 position: fixed 或 position: sticky 把输入框钉在底部,就一定要加 :adjust-position="false"。否则 uni-app 默认会自动滚动页面,和你的定位逻辑打架,结果就是输入框忽上忽下、光标乱跳。
-
adjust-position="false"是手动控制的前提,不是可选项 - 微信小程序和 H5 端不认这个属性,但也不影响——它们本来就不走原生键盘逻辑
- 如果同时用了
scroll-view,它的滚动容器会拦截adjustResize行为,此时必须靠监听+手动位移兜底
用 keyboardHeight + bottom 动态撑开输入框位置
监听 uni.onKeyboardHeightChange 拿真实键盘高度,再赋值给 bottom 样式,是最直接的位移方式。关键点不在“设值”,而在“设得准、收得快”:
-
onFocus里注册监听,别在mounted就挂,避免页面未激活时误触发 -
onBlur必须调uni.offKeyboardHeightChange(),否则反复进页面会叠加监听器,导致keyboardHeight被反复赋值 - 建议加个阈值判断:
if (res.height > 50),过滤掉 iOS 上常见的无效抖动值(比如 0、20、40) - 搭配
cursor-spacing="120",确保光标离键盘边缘有安全距离,别设太小(20不够,200又太高)
防抖和延时查节点是 iOS 适配成败关键
iOS 键盘弹出后高度回调常有延迟或多次触发,直接拿 res.height 去滚动容易抽搐。实操中必须:
- 自己写 300ms 防抖,或引入
lodash.debounce,避免连续滚动抖动 - 用
setTimeout(() => { ... }, 300)延迟查输入框位置,等键盘视口稳定后再调uni.createSelectorQuery().in(this),否则boundingClientRect()返回null - 别用
scrollTop: e.detail.scrollTop——那是scroll-view的偏移,和页面无关;要的是输入框相对整个页面顶部的绝对距离
复杂点不在代码量,而在时机判断:键盘刚弹、视口未稳、节点未渲染、监听未就位——这几个状态稍一错位,输入框就卡在半空或者滚过头。


















