ios键盘收起页面错位

刺骨的言语ヽ痛彻心扉 2023-06-19 06:49 14阅读 0赞

#### 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