微信公眾號彈出框在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與解決--微信公眾號中彈出鍵盤再收起時，原虛擬鍵盤位點擊事件無效