1. 程式人生 > >h5 移動端 監聽軟鍵盤彈起、收起

h5 移動端 監聽軟鍵盤彈起、收起

前面一篇部落格 h5 安卓 鍵盤彈起介面適配 修改webview高度提到了在adnroid中如何監聽軟鍵盤的彈起與收起,是利用的視窗的高度發生變化
window.onresize事件來做突破點的,但是ios中軟鍵盤的彈起收起並不觸發window.onresize事件。
總結:
1.在ios中軟鍵盤彈起時,僅會引起$(‘body’).scrollTop值改變,但是我們可以通過輸入框的獲取焦點情況來做判斷,但也只能在ios中採用這個方案,因為在android中存在主動收起鍵盤後,但輸入框並沒有失焦,而ios中鍵盤收起後就會失焦;
2.在android中軟鍵盤彈起或收起時,會改變window的高度,因此監聽window的onresize事件;

一、Android
//獲取原視窗的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
    //鍵盤彈起與隱藏都會引起視窗的高度發生變化
       var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        if(resizeHeight-0<originalHeight-0){
         /
/當軟鍵盤彈起,在此處操作 }else{ //當軟鍵盤收起,在此處操作 } } 二、ios focusin和focusout支援冒泡,對應focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不會冒泡,這樣就可以使用事件代理,處理多個輸入框存在的情況。 document.body.addEventListener('focusin', () => { //軟鍵盤彈出的事件處理 if(isIphone()){ } }) document.body.addEventListener('focusout', () => { /
/軟鍵盤收起的事件處理 if(isIphone()){ } })