【JS】310- 使用 focusout 事件，解決 iOS 鍵盤收起不歸位問題

點選上方“前端自習課”關注，學習起來~

本文原載于 SegmentFault 專欄青檬前端

作者：sheldon

整理編輯：SegmentFault

問題症狀：

今天在開發一個移動端的 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);
            }
        }

複制