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

最终效果图：

以上关于ios移动端如何将DOM元素固定在软键盘的上方的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。