真正可靠的方式是使用 uni.onKeyboardHeightChange,它在键盘高度变化时实时触发并返回当前高度(0 表示隐藏),仅 App 端有效,需按平台条件注册并配合 scroll-view 或 uni.pageScrollTo 调整视图。
uni-app 里监听键盘弹出和收起,靠 uni.onKeyboardHeightChange 不是 input 或 focus 事件
uni-app 没有原生的 keyboardwillshow 这类 ios 专用钩子,也不能靠监听 input 的 focus 来准确判断键盘是否已弹出——因为焦点获取和键盘实际显示存在延迟,且 android 上常出现“焦点有了但键盘没弹”或“键盘收了但 focus 还在”的情况。
真正可靠的方式是使用 uni.onKeyboardHeightChange,它会在键盘高度变化时实时触发,返回当前键盘高度(单位 px),高度为 0 表示键盘已隐藏。
-
uni.onKeyboardHeightChange在 App 端(iOS/Android)有效,H5 和小程序端不支持(H5 无系统级键盘高度通知,小程序各有自己的 API) - 必须在页面
onLoad或onShow中注册,避免重复绑定;建议在onUnload或onHide中用uni.offKeyboardHeightChange清理 - 首次进入页面时不会自动触发,需等用户真正唤起键盘后才有回调
为什么 uni.showKeyboard 和 uni.hideKeyboard 不能替代监听?
这两个 API 是主动控制键盘的,不是被动监听。调用 uni.showKeyboard 并不保证键盘一定弹出(比如被系统拦截、输入法未就绪),而 uni.hideKeyboard 只是尝试收起,无法告诉你“它到底收了没有”。它们和监听键盘状态是两件事。
- 依赖
uni.hideKeyboard()后立刻做滚动或布局调整,大概率失败——因为收起是异步的,且无回调确认完成 - 某些安卓机型(尤其定制 ROM)会忽略
uni.hideKeyboard,此时仅靠它无法感知真实状态 - 真正需要“响应键盘状态”的场景(如输入框上推、遮挡处理),必须以
uni.onKeyboardHeightChange为准
常见错误:在 H5 或微信小程序里硬套 uni.onKeyboardHeightChange
这个 API 在 H5 环境下完全不触发,在微信小程序里也无效(微信用的是 wx.onKeyboardHeightChanged,且需基础库 2.7.0+)。直接写死监听,会导致 App 正常、其他平台静默失效,排查时毫无报错提示。
- 跨平台项目必须做运行环境判断:
uni.getSystemInfoSync().platform === 'app'才注册该监听 - 微信小程序需单独用
wx.onKeyboardHeightChanged,且要在onReady后注册;支付宝小程序用my.onKeyboardHeightChanged - H5 唯一可行方案是监听
window.visualViewport?.onresize(Chrome/Edge 支持),但兼容性差、触发不稳定,仅作降级 fallback
实战中怎么让输入框不被键盘遮挡?
光监听高度还不够,得配合视图调整。常见做法是把输入框所在区域用 scroll-view 包裹,并在键盘弹出时动态设置 scroll-top,或用 uni.pageScrollTo 滚动到输入框位置。
- 别用
position: fixed+bottom模拟输入框跟随——键盘高度变化时 fixed 元素不会重排,容易错位 - 计算滚动偏移量时,用
inputRect.bottom(元素底部距视口顶部距离)减去当前键盘高度,再留 20px 安全间距 - 注意:
uni.pageScrollTo在键盘弹出过程中调用可能被丢弃,建议加setTimeout延迟 100ms 再执行,或监听到高度稳定后再滚动(比如连续两次回调高度差


















