阅读 61

ios12以上微信内置浏览器键盘收起后空白问题及原键盘位置点击事件失效问题

机型:iphoneXr(ios 12+)

问题:1. 虚拟键盘收起后,键盘位置空白,body不会及时回落沾满全屏;

   2.虚拟键盘收起后,原来虚拟键盘位置的页面元素点击事件失效。

  (只在微信内置浏览器里打开有以上问题,在原生浏览器里没有问题)

 

具体描述:

1. 整个页面是100vh,modal从页面底部弹起。键盘收起后,键盘位置空白,body并没有铺满屏幕。(这个问题只是偶发)

 

2.输入结束之后,直接点击提交按钮,请求正常发送。

   但是,输入结束之后,先点击modal的其他地方(不是灰色蒙层)再点击取消按钮或者蒙层 ,modal都不会收起,点击提交也不会发送请求。

   点击蒙层部分位置反而会触发提交的请求,而且可滑动页面(除modal部分,因为modal是底部固定的布局)。

 

原因分析(主要靠猜测,难以验证):

两个问题的本质应该是一样的----键盘收起之后页面渲染有问题。

问题2虽然body铺满了全屏(modal占了问题1留下的空白位置),但是这只是视觉上的,

因为可能是键盘收起后留下了一个透明的蒙层,盖在modal之上,所以modal上的点击事件失效。

 

怎么解释点击部分灰色蒙层会触发提交事件?

猜测真实的modal仍停留在键盘弹起后modal的位置。所以点击图中黄色区域,会触发提交事件。

 

解决方案:----重新渲染页面

给Input 绑定onBlur事件,滚动页面,触发重排,让页面重新渲染。

const handleBlur = () => {
     document.documentElement.scrollTop = 0;
}

  

 

原文:https://www.cnblogs.com/deadbug/p/12851564.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐