uView Plus Vue3 ： （ VIP Plus 付费版 ）

# uniapp 监听键盘高度

在 UniApp 中监听键盘高度变化，可以通过 uni.onKeyboardHeightChange 方法实现。这个方法可以监听到键盘高度变化事件，包括键盘弹出和收起的状态。

以下是实现方案，你可以在页面的 onLoad 生命周期中注册监听器，并在 onUnload 中移除监听器，避免内存泄漏：

export default {
  data() {
    return {
      input_content: '',
      keyboardHeight: 0 // 用于存储键盘高度
    }
  },
  onLoad() {
    // 注册键盘高度变化监听
    this.keyboardListener = uni.onKeyboardHeightChange(res => {
      console.log('键盘高度变化:', res)
      this.keyboardHeight = res.height
      
      // 可以在这里根据键盘高度做相应的界面调整
      // 例如：如果高度大于0，说明键盘弹出；等于0，说明键盘收起
    })
  },
  onUnload() {
    // 移除监听
    if (this.keyboardListener) {
      uni.offKeyboardHeightChange(this.keyboardListener)
    }
  },
  methods: {
    onClickChatSendInput() {
      // 发送逻辑
      console.log('发送内容:', this.input_content)
      // 发送后可以清空输入框
      this.input_content = ''
    }
  }
}

✅ Copy success!

你的 input 组件已经设置了 :adjust-position="false"，这会禁止页面自动上移，配合键盘高度监听，你可以手动控制页面元素的位置，比如让输入框始终保持在键盘上方：

.box-content-input {
  /* 可以根据实际需求调整样式 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可以使用动态绑定的方式根据键盘高度调整bottom值 */
}

✅ Copy success!

如果需要在键盘弹出时调整输入框位置，可以使用动态样式绑定：

<input 
  class="box-content-input" 
  :style="{ bottom: keyboardHeight > 0 ? keyboardHeight + 'px' : '0' }"
  :adjust-position="false" 
  confirm-type="send" 
  type="text" 
  placeholder="请输入内容" 
  v-model="input_content" 
  @confirm="onClickChatSendInput" 
/>

✅ Copy success!

这样就能根据键盘的实时高度来调整输入框的位置，确保输入框不会被键盘遮挡。





✅ Copy success!

← tmp_index →