如何解决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
      }
    }
  },

都在这啦

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值