ios软键盘顶起页面后隐藏不回弹解决方案

bug复现

情况说明:

在2018.11.30号一个明媚的下午,测试跟我反馈说ios出现了bug,怀着一定是你姿势不对的心里我自己悄悄的点了一下,我去,居然也出现了,可是昨天还没有啊,开始排查代码,发现没有任何问题,于是用其他版本的ios和微信测试,发现只有在ios12+,微信6.7.4版本才有,然后又看了一下微信6.7.4也是刚更新,为了在验证一下是不是自己的代码问题,于是打开了之前写的项目和自己写了一个静态的html都复现了该bug,所以就很开心的定位到了问题(此时脸上笑嘻嘻)。

上效果图:

ios软键盘顶起页面后隐藏不回弹解决方案_第1张图片
用户进行用户名的输入,然后点击完成按钮
ios软键盘顶起页面后隐藏不回弹解决方案_第2张图片
此时一个很神奇的底边出现了,这种还好,只是样式出现了问题,丑是丑了点还是可以使用的,但是如果底部使用了fixed布局,那就比较郁闷不光丑,而且按钮还不可以点击,因为位置发生了变化,他停留在了被fixed顶到的那个位置。

解决方案

本文目前提供了一种解决方案虽然可能不是最好的,但是目前能够有效的规避该问题。

解决思路:

复现该bug以后发现只要滚动一下页面就可以使页面恢复正常,于是就想可不可以在input失去焦点以后调用一下页面滚动,来完成该操作,发现果然可以。然后就产生了如下代码

上代码:

   temporaryRepair(){
    var currentPosition,timer;
    var speed=1;//页面滚动距离
    timer=setInterval(function(){
        currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
        currentPosition-=speed; 
        window.scrollTo(0,currentPosition);//页面向上滚动
        currentPosition+=speed; //speed变量
        window.scrollTo(0,currentPosition);//页面向下滚动
        clearInterval(timer);
    },1);
}

在该代码基础上增加了一些简单逻辑,判断是否为ios系统和是否为微信6.7.4版本。
代码:

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
var wechatVersion = wechatInfo[1] 
var u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(wechatVersion=='6.7.4'&&!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
...代码逻辑
}

如果大家 有更好的解决方案欢迎讨论。
如果方法可以使用给个赞吧。。。

你可能感兴趣的:(前端)