頁面的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