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
}