移动端键盘弹起导致的页面fixed定位元素布局错乱

解决办法:弹出键盘时,隐藏按钮

componentDidMount:
   // 修复键盘弹起导致的页面fixed定位元素布局错乱
    if (device === 'ios') {
      window.addEventListener('focusin', this.focusin);
      window.addEventListener('focusout', this.focusout);
    } else {
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      this.setState({ clientHeight });
      window.addEventListener('resize', this.resize);
    }
// 移除监听
  componentWillUnmount() {
    window.removeEventListener('resize', this.resize); 
    window.removeEventListener('focusin', this.focusin);
    window.removeEventListener('focusout', this.focusout);
  }

  focusin = () => {
    this.setState({ showSubmit: false });
  }

  focusout = () => {
    this.setState({ showSubmit: true });
  }

  resize = () => {
    const clientHeightN = document.documentElement.clientHeight || document.body.clientHeight;
    const { clientHeight } = this.state;
    if (clientHeight > clientHeightN) { // 键盘弹出
      this.setState({ showSubmit: false });
    } else { // 键盘收起
      this.setState({ showSubmit: true });
    }
  }

 

posted @ 2020-12-07 17:15  alisa.huang  阅读(290)  评论(0编辑  收藏  举报