ios鍵盤收起頁面錯位

ios鍵盤收起頁面錯位解決方法

/**
 * @method  screenDislocation   ios手機鍵盤收起頁面錯位解決方法
 * @param   {string}    [system]    手機系統ios或android
 */
function screenDislocation (system) {
    window._isScreenReset = true
    if (system === 'ios') {
        document.body.addEventListener('focusin', () => {
            //軟鍵盤彈出的事件處理
            // 延時是爲了等待focusout事件執行結束
            setTimeout(() => {
                window._isScreenReset = false;
            }, 100);
        });
        document.body.addEventListener('focusout', () => {
            //軟鍵盤收起的事件處理
            window._isScreenReset = true;
            setTimeout(() => {
                //當焦點在彈出層的輸入框之間切換時先不歸位
                if (window._isScreenReset) {
                    window.scroll(0, 0);//失焦後強制讓頁面歸位
                }
            }, 100);
        });
    }
}

JavaScript焦點事件

blur：元素失去焦點時觸發。這個事件不會冒泡；所有瀏覽器都支持
focus：在元素獲得焦點時觸發。這個事件不會冒泡；所有瀏覽器都支持
focusin：在元素獲得焦點時觸發，與 HTML 事件 focus 等價，但它冒泡。
focusout：在元素失去焦點時觸發。與 HTML 事件 blur 等價，冒泡
在以上四個事件中，blur 和 focus 這兩個事件的問題是它們並不冒泡，因此 IE 的 focusin 和 focusout 事件被 DOM3 級事件納爲標準方式。

當焦點從頁面的一個元素移動到另一個元素時，事件的觸發順序
focusout 在失去焦點的元素上觸發
focusin 在獲得焦點的元素上觸發
blur 在失去焦點的元素上觸發
focus 在獲得焦點的元素上觸發
要確定瀏覽器是否支持這些事件，可以使用如下代碼：
var isSupported = document.implementation.hasFeature(“FocusEvent”, “3.0”);

參考：
https://blog.csdn.net/qq_23179075/article/details/86497498
https://blog.csdn.net/TalonZhang/article/details/84298330