ios鍵盤彈起 body的高度拉長，頁面底部空白問題。ios軟鍵盤將頁面抵到上面后，關閉軟鍵盤頁面不回彈的問題。

js 監聽ios手機鍵盤彈起和收起的事件

/* js 監聽ios手機鍵盤彈起和收起的事件 */
document.body.addEventListener('focusin', () => {  //軟鍵盤彈起事件
    console.log("鍵盤彈起"); 
});
document.body.addEventListener('focusout', () => { //軟鍵盤關閉事件
    console.log("鍵盤收起");
});

 

關於ios鍵盤彈起 body的高度拉長，頁面底部空白問題
當輸入框失去焦點時，ios手機鍵盤收起，將滾動條改為0，如下：

$("#phone").on("focusout",function(){
    var ua = window.navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0) { //鍵盤收起頁面空白問題
         document.body.scrollTop = 0;
          document.documentElement.scrollTop=0;
    }
});
$("#code").on("focusout",function(){
    var ua = window.navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0) { //鍵盤收起頁面空白問題
        document.body.scrollTop = 0;
        document.documentElement.scrollTop=0;
     }
});

 

ios軟鍵盤將頁面抵到上面后，關閉軟鍵盤頁面不回彈
這個問題有時候會導致彈出框確定按鈕失效等一系列問題，

解決辦法：失去焦點時將頁面滾動到底層，或者最頂部，個人看實際情況滾動到適合位置：

$('input,textarea').on('blur', function () {
    window.scroll(0, document.body.scrollHeight);
});
$('select').on('change', function () {
    window.scroll(0, document.body.scrollHeight);
});

 

ios手機大屏幕手機比較容易遇到這個問題。 解決辦法：

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

 

解決IOS12以上微信內置瀏覽器下鍵盤收起底部空白的問題

Bug表現：
在IOS12以上的系統下，微信打開鏈接點擊輸入框獲取焦點后虛擬鍵盤自動彈出，輸入內容后收起鍵盤，原來彈出鍵盤的位置一片空白，頁面沒有自動適應整個屏幕。
解決辦法：
在公共js文件下對設備進行判斷，如果為IOS設備則全局處理該問題，即在當前頁面滾動的位置上下滾動1px的距離即可實現頁面的自適應！

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端');
}

 

終極解決方案：

1，在喚起軟鍵盤之前，記錄當前頁面滾動位置（方便后面恢復位置）；

/* 獲取窗口滾動條高度 */
function getScrollTop(){  
    var scrollTop=0;  
    if(document.documentElement&&document.documentElement.scrollTop){  
        scrollTop=document.documentElement.scrollTop;  
    }else if(document.body){  
        scrollTop=document.body.scrollTop;  
    }  
    return scrollTop;  
};

var oldScrollTop = getScrollTop() || 0; // 記錄當前滾動位置

 

2，在軟鍵盤關閉后，IOS端再將頁面歸位；

document.body.addEventListener('focusin', () => {  //軟鍵盤彈起事件
    console.log("鍵盤彈起");
    //document.title = "鍵盤彈起" + $(".weui-dialog").css("position") + CBJS.getScrollTop() + $(".weui-dialog").css("top");
});
document.body.addEventListener('focusout', () => { //軟鍵盤關閉事件
    console.log("鍵盤收起");
    //document.title = "鍵盤收起" + $(".weui-dialog").css("position") + CBJS.getScrollTop() + $(".weui-dialog").css("top");

    var ua = window.navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0) { //鍵盤收起頁面空白問題
        document.body.scrollTop = oldScrollTop;
        document.documentElement.scrollTop = oldScrollTop;
    }

});

完美解決關於ios鍵盤彈起 body的高度拉長，頁面底部空白問題。ios軟鍵盤將頁面抵到上面后，關閉軟鍵盤頁面不回彈的問題。

【完】

 

引用：

【js 監聽ios手機鍵盤彈起和收起的事件】https://www.cnblogs.com/lml-lml/p/10038370.html

【ios軟鍵盤將頁面抵到上面后，關閉軟鍵盤頁面不回彈】https://www.cnblogs.com/stubborn-donkey/p/10207316.html

【關於ios鍵盤彈起 body的高度拉長，頁面底部空白問題】https://www.jianshu.com/p/e56b5faa7175

【ios移動端軟鍵盤收起后，頁面內容留白不下滑】https://blog.csdn.net/a_small_insect/article/details/85162236

【解決IOS12以上微信內置瀏覽器下鍵盤收起底部空白的問題】https://www.jianshu.com/p/a57946771c4d