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

原创已于 2022-10-13 14:06:30 修改 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #开发语言 #前端 #reactjs

于 2022-03-18 09:53:10 首次发布

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

兼容性

4 篇文章

订阅专栏

本文介绍了在Android设备上输入法弹出导致页面元素位置异常的问题，作者提供了通过检测页面高度变化来解决此问题的方法，包括使用state管理和resize事件监听。

本人测试过在华为、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>