IOS input输入时弹出键盘挤压页面，使页面失去焦点解决方法

最新推荐文章于 2024-05-06 16:46:18 发布

一只会喊666的咸鱼

最新推荐文章于 2024-05-06 16:46:18 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/qq_41869574/article/details/89881816

版权

前端在做手机适配时，通常IOS的适配很麻烦，我之前就遇到一个问题；

在安卓手机上点击input是，手机弹出键盘，页面不会与任何变化；

当苹果手机点击input是弹出的键盘，会将页面往上挤压一段距离，输入完成后，关闭键盘，你会发现页面会出现纵向拉条，之所以出现这个，就是因为键盘弹出使页面受到了一定程度的挤压，所以我们应该在input失去焦点时将纵向拉条距离顶部的距离归零，但还有一个问题，就是有时这个事件触发不了，所以给予这个事件一个定时器就好了。

$("input,select").blur(function(){
  setTimeout(function() {
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  }, 100);
})