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简介

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值