页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景


微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复!

解决代码

后台框架嵌入iframe的情景,iframe内部页面输入框唤醒软键盘,控制顶层window滚动

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
            if(wechatInfo){
                $("input,textarea").blur(function(){
                    var currentPosition,timer;
                    var speed=1;//页面滚动距离
                    timer = setInterval(function(){
                        currentPosition = $('window.top').scrollTop();
                        currentPosition-=speed; 
                        window.top.scrollTo(0,currentPosition);//页面向上滚动
                        currentPosition+=speed; //speed变量
                        window.top.scrollTo(0,currentPosition);//页面向下滚动
                        clearInterval(timer);
            },1);
       })
}

普通页面

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                //在微信中打开
            $("input,textarea").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; //speed变量
                    window.scrollTo(0,currentPosition);//页面向下滚动
                    clearInterval(timer);
                },1);
       })
   }    
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM