1. 程式人生 > 實用技巧 >NO---22 H5在ios端微信瀏覽器中,input事件觸發後頁面不復位的問題

NO---22 H5在ios端微信瀏覽器中,input事件觸發後頁面不復位的問題

之前在做公眾號網頁時候在ios微信瀏覽器遇到一個奇怪的問題,就是input框失去焦點系統鍵盤收起後,頁面還是處於向上滾動的狀態,並沒有復位成輸入之前的狀態。你再次點選頁面時就已經錯位了,目前只發現部分ios在微信瀏覽器有這個問題,所以只針對ios系統且在微信瀏覽器上做相容就可以,這裡在網上找到一個初版做了小優化,可以直接複製到一個JS,引用就好

// 相容部分ios手機input失焦後頁面上移問題
(function() {
  let myFunction
  let isWXAndIos = isWeiXinAndIos()
  if (isWXAndIos) { // 既是微信瀏覽器 又是ios============(因為查到只有在微信環境下,ios手機上才會出現input失去焦點的時候頁面被頂起)
document.body.addEventListener('focusin', () => { // 軟鍵盤彈起事件 clearTimeout(myFunction) }) document.body.addEventListener('focusout', () => { // 軟鍵盤關閉事件 clearTimeout(myFunction) myFunction = setTimeout(function() { window.scrollTo({top: 0, left: 0, behavior: 'smooth'})//
重點 =======當鍵盤收起的時候讓頁面回到原始位置 }, 200) }) } })() function isWeiXinAndIos() { // window.navigator.userAgent屬性包含了瀏覽器型別、版本、作業系統型別、瀏覽器引擎型別等資訊,這個屬性可以用來判斷瀏覽器型別 let ua = '' + window.navigator.userAgent.toLowerCase() // 通過正則表示式匹配ua中是否含有MicroMessenger字串且是IOS系統 let isWeixin = /MicroMessenger/i.test(ua) //
是在微信瀏覽器 let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系統 return isWeixin && isIos }