HTML页面在Android手机上输入法软键盘遮挡输入框的解决办

原因

在输入框的父级增加了overflow属性后导致Android手机上输入框软键盘弹起后挡住输入框 (input / textarea)

解决办法

在页面的任何JavaScript部分添加以下代码:

if (/Android/gi.test(navigator.userAgent)) {
    // 检测userAgent是否为Android
    window.addEventListener('resize', function () {
      if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
        // 判断当前active的元素是否为input/ textarea
        window.setTimeout(function () {
          document.activeElement.scrollIntoViewIfNeeded()
          // 原生方法，滚动至需要显示的位置
        }, 0)
      }
    })
  }

相关

正则表达式 /Android/gi 中，g表示全文查找出现的所有匹配字符，i表示忽略大小写。