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

微信公众号弹出框在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与解决--微信公众号中弹出键盘再收起时，原虚拟键盘位点击事件无效