移動端軟鍵盤收起監聽

　　在移動端進行表單操做時，時常須要監聽鍵盤的收起，從而完成輸入的處理。但瀏覽器並無提供直接監聽軟鍵盤收起的接口，那該如何進行監聽能？這裏提供 監聽的兼容方案。

　　 在安卓下，大部分瀏覽器在軟鍵盤收起時，會 觸發resize事件，能夠以此來監聽；但 ios操做系統並不會觸發該事件，但大部分瀏覽器會 觸發表單的 blur事件，因此能夠以此爲監聽點。瀏覽器的軟件盤監聽情況以下表所示：

 

　　  

                                                                      軟鍵盤收起事件監聽表 

 

　　因此，經過監聽onResize、onBlur能夠實現移動端主流瀏覽器的軟鍵盤收起操做；沒法即時監聽到的，能夠監聽表單項的onblur事件，在表單項失焦時，作相應處理操做［比收起操做延時，但結果一致］。相應代碼以下：

　　兼容1：監聽resize

watchKeybord() {
    let me = this
    let oriWinHeight = window.innerHeight
    window.onresize = function() {
        me.isKeybordAvail = true
        let newHeight = window.innerHeight

        // 閥值大於140判斷爲鍵盤收起
        if (newHeight - oriWinHeight > 140) {
            me.oprNum('input')
        }
        oriWinHeight = newHeight
    }
}        

　　其中的me.isKeybordAvail = true，用來標註該瀏覽器環境下可使用resize進行監聽；另140是一個預估值的閥值，用來排除其餘的resize操做。僅resize的高度差大於140時，才被識別爲軟鍵盤交互，不然不是。如瀏覽器的工具欄、搜索欄的隱藏，window的窗口頁會有一個較小的變化。

 

　　兼容2：監聽失焦blur

setTimeout(function() {
    // 判斷是否可用resize監聽
    if (me.isKeybordAvail) {
        return
    }
    if (!newValue) {
        me.oprNum('input')
    }
}, 0)        

        其中的isKeybordAvail，是爲了判斷是否能夠經過監聽resize處理鍵盤收起，若是是，則不處理blur。此處使用了setTimeout(function(){}, 0)，它的做用是，將失焦操做延遲到下一個事件循環當中，確保resize事件已經觸發，isKeybordAvail已是正確的值。 

 

　　總結，如表中，瀏覽器表現爲四種不一樣的狀況，將有不一樣的處理：

　　　　瀏覽器類型1：經過resize事件觸發；

　　　　瀏覽器類型2：經過resize事件觸發；

　　　　瀏覽器類型3：經過blur事件觸發；

　　　　瀏覽器類型4：經過延遲的blur事件觸發。［並不是真正的鍵盤收起］   

　　如上，經過兼容使用resize和blur的方法，實現鍵盤收起的監聽。