ios软键盘弹出再收起,页面布局错乱问题解决

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ios软键盘弹出再收起,页面布局错乱问题解决相关的知识,希望对你有一定的参考价值。

参考技术A 现象描述:
ios平台,app内嵌h5,当软键盘弹出再收起时,页面布局是错乱的。直接表现是当点击其他元素时,却导致了某个文本框聚焦。

解决方案:文本框focus(聚焦)时软键盘弹出,blur(失焦)时软键盘收起。可监听文本框失焦得知软键盘收起,在文本框失焦时将页面滚动距离置为0,即可解决这一问题:

ios软键盘弹出布局上移问题解决方案

添加事件:window.scrollTo(0,0)

<input class="flex f14" placeholder="请输入您的详细地址" onblur="window.scrollTo(0,0)" />

  

 

以上是关于ios软键盘弹出再收起,页面布局错乱问题解决的主要内容,如果未能解决你的问题,请参考以下文章

ios手机弹出层上表单的操作,收起键盘焦点错乱的问题

h5 ios微信浏览器 input获取焦点后,收起软键盘,光标错位

ios学习——键盘的收起

解决安卓收起键盘无法触发失焦事件的问题

ios12及以上软键盘收起后页面被拉长

Vue中 监听移动端软键盘弹出收起事件