軟鍵盤遮擋input和input失焦後不回滾的解決辦法

對安卓手機和蘋果手機兩種不同的情況分析。

安卓：部分安卓機聚焦的時候，軟鍵盤會遮擋住input。

原因：軟鍵盤拉起的時候，頁面的高度變小了。部分安卓機聚焦的input不會自動滾動到指定位置，所以我們可以監聽當窗口改變時，讓當前聚焦的元素滾動到指定位置（scrollIntoViewIfNeeded）。我們也可以對單個input的聚焦函數添加事件，但是那樣子有一定的侷限性。重複且囉嗦。

 

iphone：當軟鍵盤失焦的時候頁面沒有回滾。

原因：暫不清楚。直接暴力滾動到底部即可。

var u = navigator.userAgent;
var flag;
var myFunction;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var androidFunction;

if (isIOS) {
   document.body.addEventListener('focusin', this.focusin);
   document.body.addEventListener('focusout', this.focusout);
} else {
   window.addEventListener('resize', this.androidFunction);
}

focusin() {
   //軟鍵盤彈起事件
   flag = true;
   clearTimeout(myFunction);
},
focusout() {
   //軟鍵盤關閉事件
   flag = false;
   if (!flag) {
      myFunction = setTimeout(function() {
        window.scrollTo({ bottom: 0, left: 0, behavior: 'smooth' });
      }, 200);
   }
},
androidFunction() {
   if (
      document.activeElement.tagName == 'INPUT' ||
      document.activeElement.tagName == 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
      }
}