您的位置:首页 > 汽车 > 新车 > mg动画制作软件_商城app开发费用多少_淘宝指数_seo是什么

mg动画制作软件_商城app开发费用多少_淘宝指数_seo是什么

2024/11/16 8:32:50 来源:https://blog.csdn.net/sufubo/article/details/143312936  浏览:    关键词:mg动画制作软件_商城app开发费用多少_淘宝指数_seo是什么
mg动画制作软件_商城app开发费用多少_淘宝指数_seo是什么

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com