H5-输入法弹出时按钮被抬升的问题

本人测试过在华为、oppo、小米、vivo等部分机型下会出现输入法弹出时按钮被抬升的问题
目前IOS没有遇到,只在Android机型下会稳定浮现,根据本人的思路理解,应是部分机型系统下,有检测浏览器脚本或者标签的行为

Android:
在这里插入图片描述

解决方案:

检测页面高度变化(输入法弹出时页面高度时会变化!)

state = {
    originHeight: document.documentElement.clientHeight, // 默认高度,用作比较
    isOriginHeight: true, // 当前高度是否仍等于默认高度·
  };

  componentDidMount() {
    window.addEventListener('resize', this.listenDocumentSize);
  }

  listenDocumentSize = () => {
    const { originHeight } = this.state;
    const currentHeight = document.documentElement.clientHeight;
    if (originHeight - currentHeight > 120) { // 次值需要根据被抬升的 Dom 进行调整
      this.setState({ isOriginHeight: false });
    } else {
      this.setState({ isOriginHeight: true });
    }
  };

  componentWillUnmount() {
    window.removeEventListener('resize', this.listenDocumentSize);
  }

  <div style={{ display: isOriginHeight ? 'block' : 'none' }}>
    提交
  </div>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值