H5 鍵盤收起 IOS沒有重繪問題

場景描述

有一個輸入框（input 或者 textarea），IOS 用戶喚起鍵盤輸入一串文字後，點擊空白區域收起鍵盤。

問題描述

鍵盤成功收起，頁面回到底部，可是點擊提交按鈕無反應。

問題緣由

鍵盤收起後，IOS沒有進行頁面重繪，從視覺上看頁面已經回彈到底部，可是邏輯層還停留在上方，因此真正的提交按鈕，在所看到按鈕的上方（一個看不見的位置）。

解決方案

監聽 失去焦點 事件後，手動觸發一下頁面滑動，就能夠觸發頁面重繪，解決這個鬼畜問題。

onBlur() {
  // 延遲的做用：等待其餘事件完成 
  setTimeout(() => {
    const top = document.getElementsByTagName('html')[0].offsetTop
    window.scroll(0, -1 * top)
  }, 500);
}
複製代碼