安卓端加softinputmode:"adjustresize"是起点,但需配合pages.json页面级配置、cursor-spacing与adjust-position成对使用、uni.onkeyboardheightchange正确监听及web-view单独处理。
安卓端加 softinputmode: "adjustresize" 是最直接有效的起点,但只靠它不够——ios 行为不稳定,<web-view></web-view> 完全不认,第三方封装组件(如 u-input)大概率失效。
pages.json 里 softinputMode 必须写对位置和值
这个配置只在 App 平台生效,且必须写在**具体页面的 style 下**,不能放在全局 app-plus 或其他层级。常见错误是塞进 "mp-weixin" 或 "h5" 配置块里,白写。
-
"softinputMode"值只能是"adjustResize",不是"adjustPan"——后者只会平移内容,不压缩视图高度,输入框仍可能被顶出可视区 - 没加这句,
uni.onKeyboardHeightChange在安卓上根本不会触发,日志都看不到 - iOS 上即使写了,部分老机型(如 iOS 14.5)或某些输入法(如百度输入法)仍会忽略,需兜底
cursor-spacing+adjust-position
adjust-position 和 cursor-spacing 必须成对出现
这两个属性是原生 <input> 和 <textarea></textarea> 的“开关”,但缺一不可:单独写 adjust-position="true" 在 App 端基本没反应;只设 cursor-spacing 而不配 softinputMode,iOS 可能有点微调,Android 则完全不动。
-
cursor-spacing不是“离顶部距离”,而是“光标到输入框可视区域底部的最小间距”;设太小(如 20),键盘一弹还是被盖住;设太大(如 300),页面猛地上蹿,底部按钮消失 - 经验数值:取当前预估键盘高度的 1/3~1/2;App 端实测常见键盘高度约 250–300px,所以
cursor-spacing="100"是较稳妥的起点 -
u-input效果打折,得配合手动滚动;真正稳的是原生<input>标签 + 这两个属性
监听 keyboardHeight 要防叠加和时机错位
uni.onKeyboardHeightChange 是跨平台兼容性最强的主动控制方式,但容易踩坑:
- 在
@focus里注册监听,别在mounted就注册,避免页面未激活时误触发 -
@blur必须调用uni.offKeyboardHeightChange(),否则多次进页面会叠加监听器,keyboardHeight被反复赋值 - H5 端不触发该事件,得另走
window.addEventListener('resize')+ 高度差判断 - 加底边距不是简单
padding-bottom: keyboardHeight + 'px',要确保父容器能撑开(比如用position: fixed或 flex 布局)
web-view 里的输入框要单独处理
adjust-position 和 cursor-spacing 对 <web-view></web-view> 内部完全无效,因为它是独立浏览器内核:
- 必须在
pages.json中配"softinputMode": "adjustResize",否则web-view根本收不到键盘高度 -
webview-styles.height不能写死或设为'auto',要用响应式变量绑定,比如::style="{ height: webviewHeight + 'px' }" - 计算新高度公式:
screenHeight - keyboardHeight - statusBarHeight - topOffset - iOS 更新高度后加
nextTick或setTimeout(() => {}, 0),否则样式不生效;收起时建议补一次transform: translateY(0)强制重排
真正难的不是写哪一行代码,而是判断当前遮挡发生在哪个环节:是原生 input 还是封装组件?是在 App 还是 web-view 里?有没有 fixed 定位干扰?这些细节一旦混淆,所有方案都会失效。











