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()）{

        }
   })
---------------------
作者：少華一號
來源：CSDN
原文：https://blog.csdn.net/u012982629/article/details/81905894
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！