iOS設備,h5的input框失焦頁面被頂起bug解決

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
    }
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容