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