js對手機軟鍵盤的監聽


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 {
        //鍵盤收起的事件處理
    }
});

或許有人問,ios為什么不用android的解決方式呢?

因為ios的第三方鍵盤可能並不會導致window resize,所以無效。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM