場景描述
有一個(gè)輸入框(input
或者 textarea
)橘券,IOS 用戶喚起鍵盤輸入一串文字后,點(diǎn)擊空白區(qū)域收起鍵盤卿吐。
問題描述
鍵盤成功收起旁舰,頁面回到底部,但是點(diǎn)擊提交按鈕無反應(yīng)嗡官。
問題原因
鍵盤收起后箭窜,IOS沒有進(jìn)行頁面重繪,從視覺上看頁面已經(jīng)回彈到底部衍腥,但是邏輯層還停留在上方磺樱,所以真正的提交按鈕纳猫,在所看到按鈕的上方(一個(gè)看不見的位置)。
解決方案
監(jiān)聽 失去焦點(diǎn) 事件后竹捉,手動(dòng)觸發(fā)一下頁面滑動(dòng)芜辕,就可以觸發(fā)頁面重繪,解決這個(gè)鬼畜問題块差。
onBlur() {
// 延遲的作用:等待其他事件完成
setTimeout(() => {
const top = document.getElementsByTagName('html')[0].offsetTop
window.scroll(0, -1 * top)
}, 500);
}