如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题

目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？

这个问题目前发现是部分安卓机上存在 解决思路有两个

• 软键盘弹起的时候隐藏按钮 收起的时候显示按钮
• 另外一个方法我忘了 哈哈哈哈

方案1：隐藏按钮

• 如何判断软键盘开启呢 ？原来的想法是通过输入框的聚焦和失去焦点来判断 但是发现没这么简单 因为关闭软键盘不等于失去焦点 这时候按钮就还是无法显示
• 所以只能采用判断当前屏幕区域的高度变化 具体代码如下：

isOriginHei:true,//控制按钮是否显示
      screenHeight: document.documentElement.clientHeight ||document.body.clientHeight, // 一定要分两种情况来确保机型兼容，
      originHeight: document.documentElement.clientHeight ||document.body.clientHeight //默认高度在watch里拿来做比较

<!-- 底部结算模块 -->
      <div
        class="payWarp"
        v-if="isOriginHei"
      >
        <div class="money">合计 ￥ {{countMoney}}</div>
        <my-button
          buttonText="确认支付"
          @click.native="topay"
        ></my-button>
      </div>

 mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        that.screenHeight = document.documentElement.clientHeight ||document.body.clientHeigh
      })()
    }
  },
  watch: {
    screenHeight(val) {
      if (this.originHeight !== val) {
        this.isOriginHei = false
      } else {
        this.isOriginHei = true
      }
    }
  },

都在这啦