当ios、input、fixed碰到一起时

最新推荐文章于 2023-11-21 16:27:49 发布

转载最新推荐文章于 2023-11-21 16:27:49 发布 · 625 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c9b5a47e51d456c5565cf8e

本文解决了iOS11系统中H5页面弹出框input光标偏移及输入框聚焦后页面滚动的问题。通过调整定位方式并监听input失焦事件实现页面自动回滚。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做H5的项目，弹出框里有input，测试在测兼容时候发现，input光标下移，偏移位置。只有 ios11 系统会出现这种情况。

然后github一下发现是 ios11 系统版本带来的 Bug，原因就是：弹框的定位采取position：fixed，而 ios（safari）对定位属性position：fixed的解析不一致导致。

所以我想到的解决方法就是：把fixed用absolute替换掉。但是首页过长，会导致弹出框定位到第一屏，当页面滑到最下发，点击登录会导致看不到弹出框。
最终决定，当页面滑到最下方，用户点登录时，使页面回滚到最上方，然后在 body加个样式overflow：hidden;
代码如下：

document.body.scrollTop = document.documentElement.scrollTop = 0;	
document.body.style.overflow = "hidden";
复制代码

在关闭弹窗时候记得把body设置回来overflow：auto;哟~

document.body.style.overflow = "auto";
复制代码

第二个问题就是在ios中输入完第一个input，在去点第二个input框时候，会出现弹出框上来，要在拉一下才能回到原位。

最后的解决方式就是在input失焦时候，自动回滚一下。代码如下：
html：

<input v-model="pwdNum" type="password"  placeholder="请输入交易密码" class="input-form" autocomplete="new-password"/>
复制代码

js:

//失去焦点回正
changeCount(){
    window.scroll(0,0);
}
复制代码

这就是我解决这两个问题的方法，希望有遇到同样问题的小伙伴，可以帮助到你哟~