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

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

这个bug有下面几个特点

特点1

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

特点2

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

特点3

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

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

javascript 复制代码
<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解决

javascript 复制代码
<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事件,但是看日志没有打印出来

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

经查资料,ios中不触发此事件,而安卓中有此事件。

所以只能依靠focus事件,加定时后scrollIntoView解决。

如果有什么更好的办法,欢迎留言,下面是最终解决办法代码

javascript 复制代码
<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={`尝试问一些问题吧`}
      />
相关推荐
小汤猿人类9 小时前
苍穹外卖Bug集合
bug
且行且知1 天前
CubeIDE BUG-project‘hello‘has no explict encoding set hello
bug
一条破秋裤1 天前
针对解决前后端BUG的个人笔记
笔记·bug
马浩同学1 天前
【ESP32】ESP-IDF开发 | I2C从机接收i2c_slave_receive函数的BUG导致程序崩溃解决(idf-v5.3.1版本)
c语言·单片机·嵌入式硬件·mcu·bug
偏振万花筒3 天前
【BUG分析】clickhouse表final成功,但存在数据未合并
clickhouse·bug
神米米3 天前
Unity3D包管理bug某些版本Fbx Exporter插件无法搜索到的问题
bug
行者记3 天前
Qt小bug —— QTableWidget排序后更新数据显示不全
开发语言·qt·bug
gma9993 天前
【Qt聊天客户端-min_Bug】客户端请求失败分析
qt·bug
WEB前端圈3 天前
【学员提问bug】小程序在onUnload里面调接口,用来记录退出的时间, 但是接口调用还没成功, 页面就关闭了。如何让接口在onUnload关闭前调用成功?
小程序·bug
|Ringleader|4 天前
【Unity实战笔记】第二十二 · 基于SMB的角色控制中遇到的一些问题(斜坡移动鬼畜、落地卡顿、角色突进、头发动画失效等)
unity·游戏引擎·bug·状态机·smb·root motion·角色控制