移動端軟鍵盤收合監聽

標籤：function   安卓   blur   turn   使用   img   延遲   處理   總結   

　　在移動端進行表單操作時，時常需要監聽鍵盤的收合，從而完成輸入的處理。但瀏覽器並沒有提供直接監聽軟鍵盤收合的介面，那該如何進行監聽能？這裡提供監聽的相容方案。　　在安卓下，大部分瀏覽器在軟鍵盤收合時，會觸發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的方法，實現鍵盤收合的監聽。 

移動端軟鍵盤收合監聽