移动端网页input点击后，软键盘挡住input解决方案

ssschema

于 2025-04-07 15:30:00 发布

阅读量100

点赞数 2

文章标签： javascript html 前端 input

本文链接：https://blog.youkuaiyun.com/u010017719/article/details/147039607

版权

具体原因不分析了，监听resize事件，获取当前点击的input输入框，将视图移动到当前input，使其全部显示，resize事件可能会回调多次。

class EventListener {

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

  removeResizeListenerForInput() {
    window.removeEventListener('resize', () => {})
  }
}

export default new EventListener()