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';
        }
    });
};

最终效果图：