在iOS12以後,h5的input框失焦後頁面會出現被頂上去一部分的bug,下面就來看下怎麼解決這個bug,首先咱們必須知道這兩個方法focusin(軟鍵盤彈起事件)、focusout(軟鍵盤關閉事件)
。
注意:這裏的input框的位置是在頁面的底部spa
廢話很少說,直接上代碼
//解決iOS軟鍵盤彈起把頁面頂起來一部分的bugcode
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 }
看到評論可能有不少人不知道這個bug怎麼來的,請看下面的截圖blog