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

CSDN地址：https://blog.csdn.net/qq_23370345/article/details/84757505

情况说明：

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

上效果图：

用户进行用户名的输入，然后点击完成按钮

此时一个很神奇的底边出现了，这种还好，只是样式出现了问题，丑是丑了点还是可以使用的，但是如果底部使用了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/)){
...代码逻辑
}

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

如果出现软件盘回弹后不留空白了 但是却出现软键盘的节点没有真实落下，挡住了一些按钮啥的可以在回弹后调用如下方法：

这个是我自己跟进转载后的文章加上的

$('input').blur(function () {
   //兼容ios软键盘弹起回落后元素无法复位造成点击无效（假死）
   setTimeout(() => {
       const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
       window.scrollTo(0, Math.max(scrollHeight - 1, 0));
   }, 10);
})