解決IOS中input失焦後，頁面上移，點選不了問題

凱迪Wen發表於2019-01-26
iOS

IOS在Input失焦後，發現body的頁面會停止不下來，並且頁面上的輸入框，按鈕點選事件，全部都移位了，需要滑動一下才可以正常。

clipboard.png

clipboard.png

下面是解決方法，可全域性引用：

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
  }

相關文章