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