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

最新推荐文章于 2024-01-22 14:33:16 发布

原创最新推荐文章于 2024-01-22 14:33:16 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #react.js

本文介绍了一种利用输入法弹起触发resize事件来调整页面显示高度的方法，并通过React实现具体代码案例。该方法适用于需要监测输入法弹起状态并作出相应UI调整的应用场景。

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)
    }
  }, [])