詳解透過focusout事件解決IOS鍵盤收起時介面不歸位的問題

今天在開發一個行動端的H5 頁面時，遇到了IOS 上鍵盤收起時介面無法歸位的問題。以下詳細描述下問題和症狀：

出問題的頁面是一個表單結構。即類似於一個div 下有4個input 表單的結構，用於使用者填寫郵寄資訊。類似:

 <div> <input type=text placeholder=請填入省市縣/> <input type=text placeholder=請填入位址/> <input type=text placeholder=請填入姓名/> <input type=text placeholder=請填入聯絡電話/></div>

截圖如下：

當使用者在手機上輸入聯絡電話時，IPhone鍵盤會彈出，此時iphone上為了讓使用者可以看到電話輸入框，會將整個頁面整體向上移動（不然鍵盤會遮住電話輸入框）。此時，實際上頁面頂部是離開了我們的視口一部分距離的（我們看到介面中消失了一行輸入框）。

然而當使用者輸入完成關閉鍵盤後，鍵盤雖然收起了，但頁面位置卻不會還原。

實際上這是由於IOS 無法在鍵盤收起時，頁面滾出視窗的部分沒有掉下來導致的。這時使用者是可以透過手指將頁面拖回去的。

但畢竟體驗不好。

要解決這個問題，我們可以在使用者遊標離開輸入框的時候，呼叫window.scrollTo(0, 0)來把頁面捲動到跟視窗頂部對齊，從而實現頁面歸位的效果。

那麼現在問題就是要給表單中4 個輸入框全部加上blur 事件，然後在handler 中呼叫window.scrollTo 。不過，無論是透過Vue 的@blur或透過DOM 操作的方式添加，都要添加4個事件監聽，不是很優雅。很自然，我們想到用事件代理。

即，我們把事件監聽放到頂部元素上；然後定義一個inputBlur 的函數等待觸發。

 <div @blur=inputBlur> <input type=text placeholder=請填寫省市縣/> <input type=text placeholder=請填入位址/> <input type=text placeholder=請填入姓名/> <input type=text placeholder=請填寫聯絡電話/></div>

結果，發現我們的事件監聽器無法觸發。原因經查是輸入框的blur事件無法冒泡。

經過查詢，發現focus和blur兩個DOM 事件在規範中就是無法冒泡的。而與之相類似的有另外2 個事件focusin和focusout則是可以冒泡的。

網路上一些文章提到focusin和focusout是IE 瀏覽器才支援的一種DOM 事件。而實際上我們看MDN 文件發現，這兩個事件已經成為DOM 3 規範的一個標準，而且可支援的瀏覽器數量並不少。

所以，果斷透過這兩個事件解決問題，我們改成focusout

 <div @focusout=inputBlur> <input type=text placeholder=請填寫省市縣/> <input type=text placeholder=請填寫地址/> <input type=text placeholder=請填寫姓名/> <input type=text placeholder=請填寫聯絡電話/></div>

然後，實作我們的事件處理器：

 inputBlur(e) { // 首先，判斷觸發事件的目標元素是否為input輸入框，我們只專注在輸入框的行為。 if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { window.scrollTo(0,0); } },

這時，我們問題解決了，當從輸入框輸入內容，然後點擊鍵盤的完成收起鍵盤，效果符合我們的預期。

但經過手機測試發現，當我們從电话输入框直接切換到姓名输入框這種操作時，頁面會發生抖動。我們來繼續分析。

其實2個輸入框切換時會抖動的原因也很簡單。因為我們在上述兩個輸入框之間切換時，頁面會先觸發电话输入框的blur事件，接著觸發姓名输入框的focus事件。這樣的話，在blur 時會觸發我們的window.scrollTo(0,0)導致頁面往下滾一下，接著姓名输入框聚焦，於是鍵盤繼續彈起---這導致頁面再次向上移動。

其實，在兩個輸入框之間切換這種操作時，我們就沒必要觸發第一個輸入框blur 時的window.scrollTo行為了。 因此看我們修改下我們的程式碼，讓輸入框切換這種操作發生時，可以切斷第一個輸入框的行為。這裡我們用s​​etTimeout 來解決：

 <div @focusout=inputBlur @focusin=inputFocus> <input type=text placeholder=請填寫省市縣/> <input type=text placeholder=請填寫地址/> <input type=text placeholder=請填入姓名/> < input type=text placeholder=請填寫聯絡電話/></div> 

 inputBlur(e) { // 首先，判斷觸發事件的目標元素是否為input輸入框，我們只專注在輸入框的行為。 if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { // 輸入框失去焦點，要把IOS鍵盤推出頁面的滾動部分還原。即將頁面捲動到視窗頂部對齊console.log('設定timer') this.timer = setTimeout(() => { console.log('timer觸發') window.scrollTo(0,0); }, 0) } }, inputFocus(e) { // 如果focus，則移除上一個輸入框的timer if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { clearTimeout(this.timer); } }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。