当前位置：首页 > article >正文

H5底部输入框点击弹起来的时候被软键盘遮挡bug

article 2024/10/30 14:23:07

就是输入框在底部，然后点击输入框的时候，软键盘弹起来了，但是输入框没有跟着一起弹起来，被软键盘档住了。

这个bug有下面几个特点

特点1

而且这个bug在ios17是没有的，在ios16是有的，并且是偶现的。

特点2

点击弹起的软键盘的完成是没有问题的，但是点击屏幕让软键盘收起来就不太行。

特点3

如果输入框里面有内容是不会被挡住的，但是没有内容的时候，只有一个placeholder的时候就会被挡住，没有placeholder就不会被挡住。

通过查询资料，想通过js的scrollIntoView方法强制滚动，于是就在

<textarea
        className={clsx(
          "relative z-20 font-['PingFang SC'] min-h-[20px] flex max-h-[182px] w-full items-center rounded-[12px] bg-[#F5F5F5] px-[14px] py-[10px] text-[16px] leading-normal text-[#3e3e45] transition-all"
        )}
        onFocus={(e) => {
    
            e.target.scrollIntoView(true);
     

        }}
        placeholder={`尝试问一些问题吧`}
      />

于是就在onFoucs事件的时候进行滚动，但是发现不行，事件是触发了，但是没滚动上来，于是怀疑，事件触发的时候，键盘还没滚动起来，所以没有生效。于是就在setTimeout解决

<textarea
        className={clsx(
          "relative z-20 font-['PingFang SC'] min-h-[20px] flex max-h-[182px] w-full items-center rounded-[12px] bg-[#F5F5F5] px-[14px] py-[10px] text-[16px] leading-normal text-[#3e3e45] transition-all"
        )}
        onFocus={(e) => {
          setTimeout(() => {
            e.target.scrollIntoView(true);
          }, 700)

        }}
        placeholder={`尝试问一些问题吧`}
      />

时间还不能加少，加少了效果不行，加到700毫秒的时候就能明显的看到，键盘弹起来把输入框挡住了，然后输入框接着也弹起来了，但是会有一个时间差，体验也不是很完美。

那么如何知道软键盘弹起呢？试了resize事件，但是看日志没有打印出来

useEffect(() => {
    // 监听软键盘的弹出和隐藏
    window.addEventListener('resize', () => {
      console.log('键盘弹出');
    });
  }, []);

经查资料，ios中不触发此事件，而安卓中有此事件。
所以只能依靠focus事件，加定时后scrollIntoView解决。
如果有什么更好的办法，欢迎留言，下面是最终解决办法代码

<textarea
        className={clsx(
          "relative z-20 font-['PingFang SC'] min-h-[20px] flex max-h-[182px] w-full items-center rounded-[12px] bg-[#F5F5F5] px-[14px] py-[10px] text-[16px] leading-normal text-[#3e3e45] transition-all"
        )}
        onFocus={(e) => {
          setTimeout(() => {
            e.target.scrollIntoView({ block: 'start', behavior: 'smooth' });
          }, 610)
        }}
        placeholder={`尝试问一些问题吧`}
      />