自定义app端、小程序端和H5等多端自定义键盘输入框，跟随系统键盘弹出和隐藏

嘿siri2025-12-19 8:24

1.标签代码：

c 复制代码

<textarea class="message-input" :style="'position:fixed;z-index:999;'+(keyboardHeight>=0?'bottom:'+keyboardHeight+'rpx;':'bottom:'+'0rpx')"
                  ref="input"
                  v-model="newPostContent"
                  :auto-focus="keyboardHeight>=0|| messageInput"
                  :placeholder="answerName"
                  confirm-type="search"
                  @keyup.enter="submitMessage"
                  @confirm="submitMessage"
        ></textarea>

2.卸载键盘时取消监听：

c 复制代码

onUnload() {
    // 页面卸载时取消监听
    uni.offKeyboardHeightChange();
  },

3.监听键盘高度：

c 复制代码

// 监听键盘高度变化
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height;
      if(this.keyboardHeight > 0){
        this.keyboardHeight -= this.inputContainerHeight; // 加上输入区域自身高度，避免遮挡
      }
      console.log('当前键盘高度:', this.keyboardHeight);
    });

4.全局变量：

c 复制代码

keyboardHeight: 0, // 键盘高度
inputContainerHeight: 200 // 输入区域自身高度，用于给主内容区设置底部padding
newPostContent: '',// 评论内容

5.css

.message-input {

width: 86%;

display: inline-block;

height: 100rpx;

box-shadow: 0 2rpx 10rpx rgb(98, 98, 98,0.3);

background: rgba(255, 255, 255, 0.14);

border-radius: 5px;

padding: 10px;

margin-bottom: 10px;

}