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元素固定在软键盘的上方

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » ios移动端如何将DOM元素固定在软键盘的上方

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们