uniapp 如何监听软键盘关闭事件

在uniapp开发中，如何监听安卓/iOS设备的软键盘关闭事件？目前尝试了@blur事件和uni.onKeyboardHeightChange方法，但都无法准确捕获键盘关闭的时机。请问有没有可靠的解决方案？需要兼容H5和App平台。

2 回复

在uniapp中，可以使用uni.onKeyboardHeightChange监听键盘高度变化，当高度变为0时即为关闭。示例：

uni.onKeyboardHeightChange(res => {
  if (res.height === 0) {
    console.log('键盘关闭')
  }
})

在 UniApp 中，可以通过监听页面的 onHide 或 onUnload 生命周期事件来间接检测软键盘关闭，但更准确的方法是使用 uni.onKeyboardHeightChange 监听键盘高度变化。当键盘高度变为 0 时，表示软键盘已关闭。

实现步骤：

  1. 在页面中监听键盘高度变化。
  2. 当键盘高度变为 0 时，执行关闭逻辑。

示例代码：

export default {
  data() {
    return {
      keyboardHeight: 0
    };
  },
  onLoad() {
    // 监听键盘高度变化
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height;
      if (res.height === 0) {
        console.log('软键盘已关闭');
        // 执行你的关闭逻辑，例如隐藏输入框、重置布局等
        this.handleKeyboardClose();
      }
    });
  },
  methods: {
    handleKeyboardClose() {
      // 处理键盘关闭后的操作
      console.log('执行键盘关闭后的业务逻辑');
    }
  },
  onUnload() {
    // 页面卸载时取消监听（避免内存泄漏）
    uni.offKeyboardHeightChange();
  }
};

注意事项：

  • 平台差异：uni.onKeyboardHeightChange 在 iOS 和 Android 上均支持，但部分低版本或特定机型可能存在兼容性问题。
  • 监听时机：建议在 onLoad 中开始监听，在 onUnload 中取消监听。
  • 键盘高度：键盘高度变化时触发，高度为 0 表示键盘关闭。

如果仅需在页面失去焦点时处理，也可结合 onHide 生命周期，但注意 onHide 在页面跳转时也会触发。

回到顶部