美文网首页
iOS设备,h5的input框失焦页面被顶起bug解决

iOS设备,h5的input框失焦页面被顶起bug解决

作者: 一枚程序员的灵感 | 来源:发表于2019-04-12 11:00 被阅读0次

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

    废话不多说,直接上代码

    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"})//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
                        
                    },200);
                }else{
                    return
                }
            })
        }else{
            return
        }
    

    相关文章

      网友评论

          本文标题:iOS设备,h5的input框失焦页面被顶起bug解决

          本文链接:https://www.haomeiwen.com/subject/tsiqwqtx.html