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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐