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

news/2024/11/2 5:42:00/

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

这个bug有下面几个特点

特点1

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

特点2

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

特点3

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

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

<textareaclassName={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解决

<textareaclassName={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解决。
如果有什么更好的办法,欢迎留言,下面是最终解决办法代码

<textareaclassName={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={`尝试问一些问题吧`}/>

http://www.ppmy.cn/news/1543781.html

相关文章

无人机之感知避让技术篇

无人机的感知避让技术是无人机安全飞行的重要保障&#xff0c;它依赖于多种传感器和算法来实现对周围环境的感知和判断。 一、主要技术类型 视觉避障 原理&#xff1a;通过安装在无人机上的摄像头捕捉周围环境的图像&#xff0c;利用计算机视觉技术对图像进行处理和分析&…

Highcharts 条形图:数据可视化的利器

Highcharts 条形图:数据可视化的利器 引言 在数据分析和可视化领域,Highcharts 是一个广受欢迎的 JavaScript 图表库。它以其易用性、灵活性和丰富的图表类型而著称。其中,条形图作为一种基础但功能强大的图表类型,被广泛应用于各种场景,以直观地展示数据分布和比较。本…

Spring Boot框架下校园社团信息管理的优化策略

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理校园社团信息管理系统的相关信息成为必然。…

thinkphp和vue基于Workerman搭建Websocket服务实现用户实时聊天,完整前后端源码demo及数据表sql

最近接了一个陪玩小程序&#xff0c;其中有一个实时聊天的项目&#xff0c;需要搭建Websocke服务&#xff0c;通过多方考虑选择了通过GatewayWorker框架&#xff08;基于Workerman&#xff09;,将代码提取了出来&#xff0c;用到的框架封装到了vendor目录下&#xff0c;完整前后…

Oracle与SQL Server的语法区别

1&#xff09;日期和日期转换函数。 SQL: SELECT A.*, CASE WHEN NVL(PAA009,) OR PAA009 >Convert(Varchar(10), SYSDATE,120) THEN Y ELSE N END AS ActiveUser FROM POWPAA A WHERE PAA001admin or PAA002admin Oracle: SELECT A.*, CASE WHEN NVL(PAA009,) or PAA009&…

【Android】Java开发语言规范

Java语言规范 命名风格 **类名&#xff1a;**使用 UpperCamelCase 风格&#xff0c;必须遵从驼峰形式&#xff0c;但以下情形例外&#xff1a;DO / BO / DTO / VO / AO&#xff0c;所有单词的首字母大写**方法名、参数名、成员变量、局部变量&#xff1a;**统一使用 lowerCam…

《Keras3 深度学习初探:开启Keras3 深度学习之旅》

《Keras3 深度学习初探&#xff1a;开启Keras3 深度学习之旅》 一、Keras3 初印象二、安装与配置&#xff08;一&#xff09;安装 Keras3&#xff08;二&#xff09;配置环境 三、模型构建基础&#xff08;一&#xff09;序列模型与函数式 API&#xff08;二&#xff09;模型的…

论文题目:深度学习在自然语言处理中的应用研究

论文题目&#xff1a;深度学习在自然语言处理中的应用研究 摘要 自然语言处理&#xff08;NLP&#xff09;是人工智能和语言学领域的分支&#xff0c;它致力于使计算机能够理解、解释和生成人类语言。深度学习&#xff0c;特别是神经网络模型&#xff0c;已经在NLP领域取得了…