H5 keyboard pops up to block the input box processing

I. Introduction:

There is a problem encountered in mixed development. Some models of Android and ios models, after the input box wakes up the keyboard, the input box will be blocked by the keyboard, and it needs to be manually slid to leak out, which affects the user experience.

Second, the solution:

1. The windows events evoked by ios and android phones are different, so they should be handled separately

2.document.body.scrollTop is invalid and can be replaced by document.documentElement.scrollTop

Three, the specific implementation process:

// 判断手机 - ios/andriod
function isIOS() {
  const u = navigator.userAgent;
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
}

/**
  * @description: 键盘弹起，输入框被遮挡
  */
function judgeInput() {
  if (isIOS()) {
    window.addEventListener('focusin', function () {
      console.log(1+document.activeElement.tagName);
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        setTimeout(function () {
          document.documentElement.scrollTop = document.body.scrollHeight;
        }, 0);

      }
    });
  } else {
    window.addEventListener('resize', function () {
      console.log(2+ document.activeElement.tagName);
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        setTimeout(function () {
          document.activeElement.scrollIntoView();
        }, 0);
      }
    });
  }
}
export {
  isIOS,
  judgeInput
}

 Clang clang clang, it’s done, just call judgeInput() directly when using it