软键盘遮挡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);
      }
}