首页 > 微信 > 详细

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

时间:2019-02-26 13:14:11      阅读:317      评论:0      收藏:0      [点我收藏+]

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

问题描述

微信公众号中有项功能是弹框模态框,输入信息后保存操作。但是在IOS系统中发现,当输入内容后,点击键盘上的“完成”后,再点击“提交”无反应;跳过“完成”直接点击“提交”就可以正常保存

问题原因

当键盘弹出后,会将body向上弹起;但是点击“完成”后并没有将body拉回,导致点击事件不在body内而无法触发。

解决方案

点击ios键盘的“完成”按钮会触发失焦事件,安卓不会;因此在失焦事件中触发浏览器的重绘就行了。

方法一:

$("input").blur(function () {
  document.body && (document.body.scrollTop = document.body.scrollTop);
})

方法二:

;(/iphone|ipod|ipad/i.test(navigator.appVersion) && document.addEventListener("blur", (e) => {
  ["input", "textarea"].includes(e.target.localName) && document.body.scrollIntoView(false);
}), true)

参考

ios最新系统bug与解决--微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

原文:https://www.cnblogs.com/jinjiyese153/p/10436511.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!