关于H5软键盘弹起盖住页面的解决方案

1,051 阅读1分钟

在写H5内嵌安卓的时候发现底部固定的输入框会被安卓手机弹起的键盘遮住 很影响用户体验

解决办法如下
<div class="comment">
  <van-cell-group>
    <van-field
        v-model="content"
        autosize
        rows="1"
        type="textarea"
        placeholder="说点什么吧.."
        @focus="scrollbox"
    />
  </van-cell-group>
  <div class="icon">
    <button @click="comment">发送</button>
  </div>
</div>
data() {
  return {
    oldHeight : ''
  }
},
created() {
  //这里定义窗口的原始高度
  this.oldHeight = document.documentElement.clientHeight //667
},
mounted() {
  let that = this;
  window.onresize = () => {
    if (that.oldHeight) {
      that.HeightChange = document.documentElement.clientHeight === that.oldHeight;
      if (!that.HeightChange) {
        this.$refs.scrollwarp.scrollTop = this.$refs?.scrollwarp.scrollHeight - this.$refs.scrollwarp.clientHeight
      }
    }
  };
},