js對手機軟鍵盤的監聽

標籤：image   doc   client   height   焦點   android   png   res   事件   

js還沒有辦法對手機軟鍵盤直接進行監聽的，但是可以有其他角度來判斷軟鍵盤是否彈起。比如輸入框是否擷取焦點等。
focusin和focusout支援冒泡，對應focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不會冒泡，這樣就可以使用事件代理，處理多個輸入框存在的情況。

$(document).on(‘focusin‘, function () {　　//軟鍵盤彈出的事件處理});$(document).on(‘focusout‘, function () {　　//軟鍵盤收合的事件處理 });

　　

但是，實際中發現這種方法僅在ios上有效，鍵盤彈出和鍵盤收合與輸入框的focusin和focusout一一對應。
在android中，點擊鍵盤上的收合按鈕，鍵盤雖然收合了，輸入框仍然處於焦點狀態，並沒有觸發focusout事件。

經實踐，發現一種變通的方法。通過比較window resize後的clientHeight與最初進來頁面時的clientHeight進行對比，如果小於最初的值，那麼就可以認為是鍵盤彈出，否則，認為鍵盤收合。

在android中鍵盤彈出和收合會改變window的高度，因此監聽window的resize。

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;$(window).on(‘resize‘, function () {    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;    if (clientHeight > nowClientHeight) {        //鍵盤彈出的事件處理    }    else {        //鍵盤收合的事件處理    }});

 

附一張移動端webview對focusin、focusout的支援情況。

js對手機軟鍵盤的監聽