完美解决移动端 Input 获取焦点软键盘遮挡文本框元素方法

Question

移动端 Input 文本框获取焦点后，会弹起软键盘输入，此时的窗口大小已发生改变，经过测试发现 iPhone 可以自动上滑页面，但是 Android 页面没有任何滑动。

HTML 5 有个函数可以实现页面滑动，Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，于是就有了下面的方法。

window.addEventListener('resize', () => {
  const activeElement = document.activeElement
  if (activeElement.tagName === 'INPUT' ||
      activeElement.tagName === 'TEXTAREA') {
    setTimeout(() => {
      activeElement.scrollIntoView()
    }, 100)
  }
})

当 Window 窗口发生变化时候，获取当前的焦点元素（document.activeElement），然后使用 scrollIntoView 函数让当前的元素滚动到浏览器窗口的可视区域内。