uni-app 配置 manifest 中 app-plus.softinput.mode 为 adjustPan 打包自定义基座后,安卓 onKeyboardHeightChange 事件失效

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 配置 manifest 中 app-plus.softinput.mode 为 adjustPan 打包自定义基座后,安卓 onKeyboardHeightChange 事件失效

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 15
手机厂商 华为
手机机型 huawei_phone
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<template>
<view class="content">
<input class="input" placeholder="请输入" />
</view>    
</template>  

<script>
export default {
onLoad() {
// 全局键盘高度监听事件
uni.onKeyboardHeightChange(res => this.showToast(`uni.onKeyboardHeightChange: ${res.height}`))
},
methods: {
showToast(title) {
uni.showToast({
title,
icon: 'none',
})
},
}
}
</script>  

操作步骤:

配置 manifestapp-plus.softinput.mode 配置为 adjustPan ,云端打包自定义基座

预期结果:

onKeyboardHeightChange 可以监听键盘高度

实际结果:

onKeyboardHeightChange 不触发回调

bug描述:

配置 manifestapp-plus.softinput.mode 配置为 adjustPan 云端打包自定义基座后,安卓中 onKeyboardHeightChange 事件失效

去掉后打包, 自定义基座就可以监听到


4 回复

如果不配置,android 偶尔会出现键盘消失时,下面会出现黑块,设置adjustPan后暂未出现黑块,但是会监听不到键盘高度变化


回复 NightMing: 没有,一直监听不到

在 uni-app 中配置 manifest.jsonapp-plus.softinput.modeadjustPan 时,确实可能会导致 onKeyboardHeightChange 事件在安卓设备上失效。adjustPan 模式通常用于确保输入框不会被软键盘遮挡,而 onKeyboardHeightChange 事件则用于监听软键盘高度变化,这在一些需要动态调整布局的场景中非常有用。

softinput.mode 设置为 adjustPan 时,系统可能会调整页面内容以避免遮挡,但这并不总是触发软键盘高度变化事件。如果你需要在这种模式下仍然获取软键盘高度,可以考虑以下几种替代方案或调整:

方案一:使用自定义监听逻辑

由于 onKeyboardHeightChange 事件失效,你可以尝试通过监听页面滚动或输入框焦点变化来间接获取软键盘高度。不过,这种方法较为复杂且不一定准确。

方案二:调整 softinput.mode 配置

如果可能,考虑将 softinput.modeadjustPan 改为 adjustResize。在 adjustResize 模式下,软键盘弹出时会改变视图的可视区域大小,这通常会触发 onKeyboardHeightChange 事件。

修改 manifest.json

"app-plus": {
  "softinput": {
    "mode": "adjustResize"
  }
}

方案三:手动计算软键盘高度(不推荐,但可行)

如果以上方案不适用,你可以尝试通过监听页面高度变化来手动计算软键盘高度。这种方法依赖于页面的布局和滚动情况,可能不够稳定。

示例代码(Vue 组件内)

export default {
  data() {
    return {
      screenHeight: 0,
      windowHeight: 0,
      keyboardHeight: 0
    };
  },
  mounted() {
    this.screenHeight = window.screen.height;
    this.windowHeight = window.innerHeight;

    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.windowHeight = window.innerHeight;
      this.keyboardHeight = this.screenHeight - this.windowHeight;
      console.log('Keyboard height:', this.keyboardHeight);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
};

请注意,这种方法依赖于窗口大小的变化,如果页面中有其他动态改变高度的元素,可能会导致计算不准确。

综上所述,推荐首先尝试调整 softinput.mode 配置为 adjustResize,这是最直接且通常有效的方法。如果确实需要使用 adjustPan,则可能需要更复杂的逻辑来间接获取软键盘高度。

回到顶部