IOS微信點擊input彈出輸入法，關閉后頁面留白解決方案

 

　　場景：IOS用微信點擊input框彈出輸入法后

　　　　　

 

　　　　不管你是輸入信息，還是不輸入直接點完成關閉輸入法，都會導致頁面被擠上去后產生留白，從而改變頁面布局

　　　　           

 

 

 

　　　　

　　解決方法：

　　　　　　給input添加blur（失去焦點）事件，讓頁面強制回滾，距離為0，代碼如下　　

　　　　　　　  $("input").blur(function(){
   　　　　　　　　 document.body.scrollTop = document.documentElement.scrollTop = 0;
　　　　　　　  });

　　　　　　　　原文出處：https://blog.csdn.net/KenThomas/article/details/86691404

 　　　　　　　　注：這種寫法也是可以的，window.scroll(0,0);  等同於上面的 document.body.scrollTop = document.documentElement.scrollTop = 0;

　　

　　補充：

　　　　最開始找到的方法並不是上面那個，而是下面這個看似比較復雜的代碼，雖然也能夠解決問題

var u = navigator.userAgent, app = navigator.appVersion；
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
    $(document).ready(function(){
        $("input").blur(function(){
            if (isIOS) {
                blurAdjust()
                // alert("1231321233")
            }
        });
    });

    // 解決蘋果不回彈頁面
    function blurAdjust(e){
        setTimeout(()=>{
            // alert("1231321233")
            if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
                return
            }
            let result = 'pc';
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判斷iPhone|iPad|iPod|iOS
                    result = 'ios'
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判斷Android
                    result = 'android'
            }
            
            if( result = 'ios' ){
                document.activeElement.scrollIntoViewIfNeeded(true);
            }
        },100)
    }

 　　　　　　原文出處：https://blog.csdn.net/m0_37520980/article/details/86305488

 

　　注：雖然上面2種方法都能解決問題，但從代碼的冗雜度來看，顯然第一種更好，代碼量更少，也更容易理解。

　　　　所以小伙伴們在查找問題解決方法時，建議抱着還有更簡單的方法的心理多試着找一找