ios移动端把DOM元素固定在软键盘的上方

项目场景： 在h5页面，有个输入匹配框，搜索的结果展示在软键盘之上

---

问题描述： 在安卓手机采用固定定位即可实现，在iOS中固定定位失效，并不能固定在软键盘之上

---

解决方案：

// 这里为dom元素代码
this.state = {
  financingVcResult: false, //搜索结果是否显示
};


<div ref={dom => {this.myRef = dom;}}>
  <InputItem
    {...getFieldProps(`thisVcs${data.id}`, {
    // 去除输入字符串前面是空格
    normalize: (v, prev) => {
      if (v) {
        return v.replace(/(^\s*)/g, '');
      }
        return v;
      }
    })}
    onFocus={this.focusProjectName} //获取焦点进行处理
    onBlur={name => {
       setTimeout(() => {
          this.setState({ financingVcResult: false });
       }, 50);
    }}
  />
</div>

{/* 此处为固定的盒子（搜索结果）固定在软键盘之上  */}
{financingVcResult && (
  <div className="financingVcResult">
     {this.renderResult(resultList)}    
  </div>
)}

下面是样式代码

{/* 此元素的定位是针对整个文档，即body  */}
.financingVcResult {
  position: absolute;
  bottom: 0;
}

下面是js代码

focusProjectName = name => {
  this.setState({ financingVcResult: true }, () => {
  	// isIOS(）是判断是否为ios，是进行处理，不是将定位改为固定定位即可
    if (isIOS()) {
      // 监听窗口大小的变化
      window.visualViewport.addEventListener('resize', () => {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        // window.innerHeight，返回窗口的文档显示区的高度
        // window.visualViewport.height：返回视觉视口的高度所对应的 CSS 像素数。
        if (window.innerHeight - window.visualViewport.height > 0) {
          document.getElementsByClassName('financingVcResult')[0].style.bottom =
              window.innerHeight -
              window.visualViewport.height -
              Math.abs(window.innerHeight - this.props.windowInnerHerght) -
              scrollHeight +
              'px';
            return;
            //对上面bottom的值进行说明
            //window.innerHeight - window.visualViewport.heigh 此值其实就是虚拟键盘的高度，在这里还需要减一个scrollHeight的值，
            //在ios输入框获取焦点后都会有一个滚动，此滚动会让输入框位于可视窗口的中间，这一滚动对定位有影响，所以要减去，
            /**另一个问题是(window.innerHeight - this.props.windowInnerHerght)是什么呢，
            this.props.windowInnerHerght 是一进入页面所保存的窗口文档高度
            在qq浏览器预览时不会出现全屏模式，(window.innerHeight - this.props.windowInnerHerght）的值也就是0，不会产生什么影响。
            在Safari浏览器下，页面够长的情况下，页面向下滑动就会是全屏模式，一旦全屏，对定位就有影响，定位所出现的偏差就是全屏模式下innerHeight与非全屏模式下的innerHeight
            */
          }
        });
        // 监听滚动事件
        let tip = false;
        window.addEventListener('scroll', () => {
         // tip开关只有在获取焦点后才会滚动 滚动的高度自己决定
         // 此处我的这个高度是让这个输入框刚好滚动到可视窗口之下，是为了能让搜索结果都可展示出来
          if (!tip) {
            window.scroll({
              top: this.myRef.offsetTop - 40,
              behavior: 'smooth'
            });
            tip = true;
          }
          var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
          if (window.innerHeight - window.visualViewport.height > 0) {
          	// 此处一旦滚动，就收起键盘，即输入框失去焦点
            if (scrollHeight > this.myRef.offsetTop) {
              // 滚动太高 收起键盘
              let dom = this.myRef;
              dom.getElementsByTagName('input')[0].blur();
              this.setState({ financingVcResult: false });
            }
            document.getElementsByClassName('financingVcResult')[0].style.bottom =
              window.innerHeight -
              window.visualViewport.height -
              Math.abs(window.innerHeight - this.props.windowInnerHerght) -
              scrollHeight +
              'px';
            return;
          }
        });
      } else {
        // 安卓用固定定位
        document.getElementsByClassName('financingVcResult')[0].style.position ='fixed';
      }
    });
  };

最终效果图

参考链接: js如何获取iOS键盘高度？window.visualViewport简介