标签：ios12 微信 蒙层 键盘 点击 modal 收起 页面

机型：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;
}

　　

 

标签：ios12,微信,蒙层,键盘,点击,modal,收起,页面
来源： https://www.cnblogs.com/deadbug/p/12851564.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。