H5移动端监听键盘弹出收起visualViewport

H5移动端监听键盘弹出收起visualViewport

// 获取页面的可视高度
 const originHeight = document.documentElement.clientHeight || document.body.clientHeight

    const resizeHandler = () => {
    	// 页面大小发生改变 重新获取可视窗口的高度
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
      const activeElement = document.activeElement
      // 如果 重新获取的高度小于初始高度那么认为此刻键盘弹起了
      
      if (resizeHeight < originHeight) {
        // 键盘弹起后逻辑
        if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')
        ) {
          setTimeout(() => {
            activeElement.scrollIntoView({ block: 'center' }) //焦点元素滚到可视区域的问题
          }, 0)
          // 键盘弹起需要隐藏的置底元素 设置隐藏 opacity:0
        }
      } else {
        // 键盘收起后逻辑
        console.log('收起了')
        // 键盘弹起需要展示的置底元素 设置展示 opacity:1
      }
    }
    // window.addEventListener('resize', resizeHandler)
    window.visualViewport.addEventListener('resize', resizeHandler)

兼容性