如何解决ios12中遇到带input弹窗的错位问题-创新互联

这篇文章主要介绍如何解决ios12中遇到带input弹窗的错位问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司IDC提供业务:托管服务器,成都服务器租用,托管服务器,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。

问题描述:

使用fixed定位的弹窗,在ios12的系统里,软键盘调起后,页面整体上移,当软键盘消失时,视觉上页面已经回到原始位置,但其实弹窗的焦点位置仍在软键盘调起时的位置。

解决办法:

这也是参考某位大佬的解决办法

document.body.addEventListener('focusin', () => {
  // 软键盘弹出的事件处理
  this.isReset = false
})
document.body.addEventListener('focusout', () => {
  // 软键盘收起的事件处理
  this.isReset = true
  setTimeout(() => {
    // 当焦点在弹出层的输入框之间切换时先不归位
    if (this.isReset) {
     window.scroll(0, 0) // 失焦后强制让页面归位
    }
  }, 300)
})

尝试解决的其他方法

尝试不使用fix定位,选择的absolute,判断input失焦时,使用window.scroll(),但是需要解决的问题很多

  1. 不同手机的input框在软键盘收起时情况不一样。苹果手机软键盘收起时,input框就失焦,但是小米手机键盘收起时,input框不失焦

  2. 使用absolute定位后,软键盘出现页面会上移,软键盘消失时,页面不能恢复原来的位置

以上是“如何解决ios12中遇到带input弹窗的错位问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站题目:如何解决ios12中遇到带input弹窗的错位问题-创新互联
网页网址:http://azwzsj.com/article/dpideo.html