免費(fèi)AI編程助手
今天小編整理了最近小伙伴們的私信，突然發(fā)現(xiàn)了有個(gè)小伙伴提出的：“在html中如何解決IOS鍵盤問題？”這個(gè)問題，那么今天我們就來圍繞這個(gè)問題做個(gè)講解！
問題癥狀
今天在開發(fā)一個(gè)移動端的 H5 頁面時(shí)，遇到了 IOS 上鍵盤收起時(shí)界面無法歸位的問題。下面詳細(xì)描述下問題和癥狀：
頁面結(jié)構(gòu)
出問題的頁面是一個(gè)表單結(jié)構(gòu)。即類似于一個(gè) div 下有4個(gè) input 表單的結(jié)構(gòu)，用于用戶填寫郵寄信息。類似:
<div>
<input type="text" placeholder="請?zhí)顚懯∈锌h" />
<input type="text" placeholder="請?zhí)顚懙刂? />
<input type="text" placeholder="請?zhí)顚懶彰? />
<input type="text" placeholder="請?zhí)顚懧?lián)系電話" />
</div>截圖如下：
鍵盤彈起時(shí)頁面自動上移
當(dāng)用戶在手機(jī)上輸入聯(lián)系電話時(shí)，IPhone鍵盤會彈出，此時(shí)iphone上為了讓用戶可以看到電話輸入框，會將整個(gè)頁面整體向上移動（不然鍵盤會遮住電話輸入框）。此時(shí)，實(shí)際上頁面頂部是離開了我們的視口一部分距離的（我們看到界面中消失了一行輸入框）。
鍵盤收起時(shí)頁面無法還原歸位
然而當(dāng)用戶輸入完成關(guān)閉鍵盤后，鍵盤雖然收起了，但頁面位置卻不會還原。
問題分析
實(shí)際上這是由于 IOS 無法在鍵盤收起時(shí)，頁面滾出視口的部分沒有掉下來導(dǎo)致的。這時(shí)用戶是可以通過手指將頁面拖回來的。
但是畢竟體驗(yàn)不好。
要解決這個(gè)問題，我們可以在用戶光標(biāo)離開輸入框的時(shí)候，調(diào)用 window.scrollTo(0, 0) 來把頁面滾動到跟視口頂部對齊，從而實(shí)現(xiàn)頁面歸位的效果。
那么現(xiàn)在問題就是要給表單中 4 個(gè)輸入框全部加上 blur 事件，然后在 handler 中調(diào)用 window.scrollTo。不過，無論是通過 Vue 的 @blur 還是通過 DOM 操作的方式添加，都要添加4個(gè)事件監(jiān)聽，不是很優(yōu)雅。很自然，我們想到用事件代理。
事件代理
即，我們把事件監(jiān)聽放到頂部元素上；然后定義一個(gè) inputBlur 的函數(shù)等待觸發(fā)。
<div @blur="inputBlur">
<input type="text" placeholder="請?zhí)顚懯∈锌h" />
<input type="text" placeholder="請?zhí)顚懙刂? />
<input type="text" placeholder="請?zhí)顚懶彰? />
<input type="text" placeholder="請?zhí)顚懧?lián)系電話" />
</div>結(jié)果，發(fā)現(xiàn)我們的事件監(jiān)聽器無法觸發(fā)。原因經(jīng)查是輸入框的 blur 事件無法冒泡。
無法冒泡的解決方案
經(jīng)過查詢，發(fā)現(xiàn) focus 和 blur 兩個(gè) DOM 事件在規(guī)范中就是無法冒泡的。而與之相類似的有另外 2 個(gè)事件 focusin 和 focusout 則是可以冒泡的。
網(wǎng)上一些文章提到 focusin 和 focusout 是 IE 瀏覽器才支持的一種 DOM 事件。而實(shí)際上我們看 MDN 文檔發(fā)現(xiàn)，這兩個(gè)事件已經(jīng)成為 DOM 3 規(guī)范的一個(gè)標(biāo)準(zhǔn)，而且可支持的瀏覽器數(shù)量并不少。
所以，果斷通過這兩個(gè)事件解決問題，我們改成 focusout
<div @focusout="inputBlur">
<input type="text" placeholder="請?zhí)顚懯∈锌h" />
<input type="text" placeholder="請?zhí)顚懙刂? />
<input type="text" placeholder="請?zhí)顚懶彰? />
<input type="text" placeholder="請?zhí)顚懧?lián)系電話" />
</div>然后，實(shí)現(xiàn)我們的事件處理器：
inputBlur(e) {
// 首先，判斷觸發(fā)事件的目標(biāo)元素是否是input輸入框，我們只關(guān)注輸入框的行為。
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
window.scrollTo(0,0);
}
},這時(shí)，我們問題得到解決了，當(dāng)從輸入框輸入內(nèi)容，然后點(diǎn)擊鍵盤的完成收起鍵盤，效果符合我們的預(yù)期。
但是經(jīng)過手機(jī)測試發(fā)現(xiàn)，當(dāng)我們從 電話輸入框 直接切換到 姓名輸入框 這種操作時(shí)，頁面會發(fā)生抖動。我們來繼續(xù)分析。
解決抖動問題
其實(shí)2個(gè)輸入框切換時(shí) 抖動的原因也很簡單。因?yàn)槲覀冊谏鲜鰞蓚€(gè)輸入框之間切換時(shí)，頁面會首先觸發(fā) 電話輸入框 的 blur 事件，接著觸發(fā) 姓名輸入框 的 focus 事件。這樣的話，在 blur 時(shí)會觸發(fā)我們的 window.scrollTo(0,0) 導(dǎo)致頁面往下滾一下，接著 姓名輸入框 聚焦，于是鍵盤繼續(xù)彈起---這導(dǎo)致頁面再次向上移動。
其實(shí)，在兩個(gè)輸入框之間切換這種操作時(shí)，我們就沒必要觸發(fā)第一個(gè)輸入框 blur 時(shí)的 window.scrollTo 行為了。 因此看我們修改下我們的代碼，讓輸入框切換這種操作發(fā)生時(shí)，可以切斷第一個(gè)輸入框的行為。這里我們用 setTimeout 來解決：
<div @focusout="inputBlur" @focusin="inputFocus">
<input type="text" placeholder="請?zhí)顚懯∈锌h" />
<input type="text" placeholder="請?zhí)顚懙刂? />
<input type="text" placeholder="請?zhí)顚懶彰? />
<input type="text" placeholder="請?zhí)顚懧?lián)系電話" />
</div>
inputBlur(e) {
// 首先，判斷觸發(fā)事件的目標(biāo)元素是否是input輸入框，我們只關(guān)注輸入框的行為。
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
// 輸入框失去焦點(diǎn)，要把IOS鍵盤推出頁面的滾動部分還原。即將頁面滾動到視窗頂部對齊
console.log('設(shè)置timer')
this.timer = setTimeout(() => {
console.log('timer觸發(fā)')
window.scrollTo(0,0);
}, 0)
}
},
inputFocus(e) {
// 如果focus，則移除上一個(gè)輸入框的timer
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
clearTimeout(this.timer);
}
}那么以上就是有關(guān)于：“在html中如何解決IOS鍵盤問題？”這個(gè)問題的內(nèi)容和解決方法分享，當(dāng)然了如果你對于這個(gè)方法有其他的看法也是可以分享自己的解決方法和大家一同學(xué)習(xí)，對于html5想有更多進(jìn)步的小伙伴們可以在W3Cschool上進(jìn)行深造學(xué)習(xí)。
