經過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 行爲了。 所以看咱們修改下咱們的代碼，讓輸入框切換這種操做發生時，能夠切斷第一個輸入框的行爲。這裏咱們用 setTimeout 來解決：

<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);
            }
        }

完