pages.json 中配置 softinputmode 为 adjustResize 是解决安卓键盘遮挡最简方案,需写在页面 style 下且仅对 App 平台生效;iOS 支持不稳定,应配合 keyboardHeightChange 监听与 pageScrollTo 动态调整。

pages.json 里配 softinputmode 是最省事的起点
安卓端键盘遮挡,80% 的情况靠这一行配置就能压住。uni-app 在 App 端(非 H5、非小程序)默认用的是 adjustPan 模式,也就是只把输入框“往上顶”,不重算布局,结果就是输入框被顶到屏幕中间甚至顶部,底下按钮消失、光标乱跳。
改成 adjustResize 后,系统会把整个页面视图高度压缩,给键盘腾位置,同时保持 DOM 布局逻辑连贯——这才是“上推”的正确姿势。
- 必须写在具体页面的
style下,不是全局app-plus配置(否则可能影响其他页) - 只对 App 平台生效,H5 和小程序完全不认这个字段
- iOS 上部分机型(尤其老版本 iOS)对
adjustResize支持不稳定,需配合其他手段兜底 - 如果页面用了
scroll-view或自定义滚动容器,它可能拦截 resize 行为,导致上推失效
监听 uni.onKeyboardHeightChange 动态加底边距
这是跨平台兼容性最强的主动控制方式。它不依赖系统自动行为,而是拿到键盘真实高度后,手动撑开页面底部留白,让输入框始终“露出来”。特别适合有固定底部按钮(如登录、提交)的场景。
关键不在“加 padding”,而在“加得准、收得快”:加晚了会闪一下,收早了键盘还没缩回去,按钮又会被盖住。
-
onFocus里注册监听,别在mounted就注册,避免页面未激活时误触发 -
onBlur必须调用uni.offKeyboardHeightChange(),否则多次进页面会叠加监听器,导致keyboardHeight被反复赋值 - 建议搭配
cursor-spacing使用,比如设成120,确保光标离键盘边缘有安全距离 - H5 端不触发该事件,需另走
window.addEventListener('resize')+ 高度差判断
聚焦时用 uni.pageScrollTo 滚到输入框位置
当输入框在页面下半屏、且父容器不能随键盘伸缩时(比如嵌在 scroll-view 里),pageScrollTo 是唯一能把它拽进可视区的办法。但它不是“万能滚”,滚错时机或坐标,反而会让用户觉得页面抽搐。
常见错误是直接滚 scrollTop: e.detail.scrollTop——那是 scroll-view 自己的偏移,和页面无关;真正要的是输入框相对整个页面顶部的距离。
- 必须用
uni.createSelectorQuery().in(this)查当前组件实例内的节点,否则查不到 - 务必套
setTimeout(300ms 左右),等键盘开始弹出、视口稳定后再查位置,不然boundingClientRect()返回null - iOS 上若页面有
position: fixed头部,滚动后 fixed 元素可能错位,需额外用transform: translateZ(0)强制重绘 - 连续切换输入框时,别重复调用
pageScrollTo,先clearTimeout上一次定时器
Webview 场景下别碰 height: 100vh
如果你在 里加载 H5 页面,然后发现键盘一出,输入框就“掉下去”不见了——大概率是 Webview 容器高度写死了。原生 Webview 不会自动响应键盘高度变化,100vh 在键盘弹出后还是按全屏算,实际可视区却小了一截,内容就被切掉了。
这不是 uni-app 的 bug,是 Webview 渲染机制决定的。你不能指望它像普通页面一样“智能缩放”。
- Webview 容器高度必须用动态单位,比如
height: calc(100vh - var(--safe-area-inset-bottom)),并监听键盘高度改 CSS 变量 - 更稳妥的做法是 Webview 内部 H5 页面自己监听
resize事件,再通过postMessage和 uni-app 主页通信,由主页面调整 web-view 高度 - 千万别在
web-view外层再套一层scroll-view,这会导致滚动冲突,iOS 上几乎必现遮挡
真实项目里,往往要组合使用:App 端优先配 softinputmode,再加 cursor-spacing 和键盘高度监听兜底;H5 端放弃系统自动行为,专注 pageScrollTo + 视口检测;Webview 则必须内外协同,不能只靠 uni-app 单方面处理。最容易被忽略的,是不同平台事件触发时机的毫秒级差异——iOS 键盘动画慢、Android 快,同一段延时代码,在两边表现可能完全相反。










