解决H5开发input聚焦可能被输入法遮住的问题

1.思路

        1.1 利用输入法的弹起会触发resize事件这个原理

        1.2 利用scrollIntoView和scrollTop方法对页面进行滚动

2.具体代码实现（React）

const resizeMethod = () => {
    setShowHeight(document.body.clientHeight)
    if (
      document.activeElement?.tagName === "INPUT" ||
      document.activeElement?.tagName === "TEXTAREA"
    ) {
      window.setTimeout(function () {
        document.activeElement?.scrollIntoView();
        cardRef.current.scrollTop -= cardButtonRef.current.getBoundingClientRect().height
      }, 0);
    }
  }

  useEffect(() => {
    //默认屏幕高度
    setDocmHeight(document.documentElement.clientHeight)
    //实时屏幕高度
    setShowHeight(document.documentElement.clientHeight)

    window.addEventListener('resize', resizeMethod)

    return () => {
      window.removeEventListener('resize', resizeMethod)
    }
  }, [])

3.附带

        docmHeight和showHeight的对比可以用来做一些输入法弹起和收回的一些操作