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>

猜你喜欢

转载自blog.csdn.net/Cavin80/article/details/123566864