解决IOS12以上微信内置浏览器下键盘收起底部空白的问题

今天在做一个H5的网页页面,需求是在微信里面打开正常,页面上有个表单输入框,同事手机苹果6P出现了一个问题:键盘唤起再关闭的时候下面有一片空白。而苹果8 没出现,经查阅和测试发现跟系统有关:

苹果以往的系统是没问题的,一般情况下,点击input唤起键盘后是会自动显示到输入框的地方,然后收起键盘页面就会恢复到底部。

 但是如果苹果是已经更新到最新的IOS12的话就会发生一个BUG,就是键盘唤起后把页面顶上去,然后把键盘收回去后页面却回不来了,保持着被顶起的状态,原本键盘的地方留出一块空白。

解决BUG方法:

解决方法就是在input失去焦点的时候(就是收起键盘时)让页面滚动到顶部。

适用:微信H5/移动端页面

let ua = window.navigator.userAgent;

    let app = window.navigator.appVersion;

    //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);

    if(!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

        //$alert('ios端');

        $("input").on("blur",function () {

            var currentPosition,timer;

            var speed=1;

            timer=setInterval(function(){

                currentPosition=document.documentElement.scrollTop || document.body.scrollTop;

                currentPosition-=speed;

                window.scrollTo(0,currentPosition);//页面向上滚动

                currentPosition+=speed;

                window.scrollTo(0,currentPosition);//页面向下滚动

                clearInterval(timer);

            },100);

        })

    }else if(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {

        //$alert('android端');

    }

你可能感兴趣的:(解决IOS12以上微信内置浏览器下键盘收起底部空白的问题)