在iOS设备下,h5的input框失焦后页面被顶起来一部分bug解决

html5

浏览数:299

2019-1-21

AD:资源代下载服务

在iOS12之后,h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug,首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)

废话不多说,直接上代码
//解决iOS软键盘弹起把页面顶起来一部分的bug

    var u = navigator.userAgent;
    var flag;
    var myFunction;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if(isIOS){
        document.body.addEventListener('focusin', () => {  //软键盘弹起事件
            flag=true;
            clearTimeout(myFunction);
        })
        document.body.addEventListener('focusout', () => { //软键盘关闭事件
            flag=false;
            if(!flag){
                myFunction = setTimeout(function(){  
                    window.scrollTo({top:0,left:0,behavior:"smooth"})//重点  =======当键盘收起的时候让页面回到原始位置
                },200);
            }else{
                return
            }
        })
    }else{
        return
    }

原文地址:https://segmentfault.com/a/1190000017962106