vue项目中,点击输入框的时候,弹出的键盘挡住了输入框,需要把输入框展示在可见区域中,不被遮挡

项目中,点击输入框的时候,弹出来的键盘挡住了输入框,输入框不在可视区域里面,主要解决代码,加个监听来看是否点击了输入框,滚动到可视区域

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。

      window.addEventListener('resize', function () {
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          window.setTimeout(function () {
            document.activeElement.scrollIntoViewIfNeeded()
          }, 0)
        }
      })