1. 程式人生 > >h5 移動端 監聽輸入法的鍵盤彈起、收起,輸入法彈出導致頁面底部按鈕上浮

h5 移動端 監聽輸入法的鍵盤彈起、收起,輸入法彈出導致頁面底部按鈕上浮

------------------------------------------------------input框時輸入框彈出,ios顯示正常:(如下)---------------------------------------

--------------------------------------------------------但是andriod則會將按鈕擠上去,(如下)---------------------------------------------------:

首先還是從源頭上看,針對安卓系統來說,軟鍵盤彈起的方式是很有多種的常用的是這2種android:windowSoftInputMode="adjustPan|adjustResize” 
1. “adjustResize” 
該Activity主視窗總是被調整螢幕的大小以便留出軟鍵盤的空間,會呼叫onSizeChanged方法 
2. “adjustPan” 
該Activity主視窗並不調整螢幕的大小以便留出軟鍵盤的空間。相反,當前視窗的內容將自動移動以便當前焦點 不被鍵盤覆蓋和使用者能總是看到輸入內容的部分。不會呼叫onSizeChanged方法

綜上所述安卓會發生這個現象是因為原視窗為了留出軟鍵盤的空間,高度發生了改變,絕對定位在底部的按鈕就會被擠壓,給人的假象就是被鍵盤頂起。既然我們知道了原因出在了原視窗高度發生了改變,那就有可做文章的地方,請看下面的程式碼:
 

//獲取原視窗的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
    //鍵盤彈起與隱藏都會引起視窗的高度發生變化
    var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
     1. 從app自身的Webview高度方面去考慮
        if(resizeHeight-0<originalHeight-0){ // resizeHeight<originalHeight證明視窗被擠壓了
         plus.webview.currentWebview().setStyle({
          height:originalHeight //強設定為原高度
         });
      }
     2. 從h5自身角度去解決
    if(resizeHeight-0<originalHeight-0){ // resizeHeight<originalHeight證明視窗被擠壓了
       可以去操作dom 進行隱藏按鈕  // xxx.style.display='none';
       //隱藏的手段就有很多了 可以z-index為負數、opacity透明度等等
      }else{
       還原按鈕的顯示 // xxx.style.display='';
      }
}

andriod中如何監聽軟鍵盤的彈起與收起,是利用的視窗的高度發生變化 
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){
         //當軟鍵盤彈起,在此處操作
          $("#ibo-window-bottom").css("display","none"); //隱藏按鈕
         }else{
         //當軟鍵盤收起,在此處操作
          $("#ibo-window-bottom").css("display","block");//顯示按鈕
         }
}


二、ios
focusin和focusout支援冒泡,對應focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不會冒泡,這樣就可以使用事件代理,處理多個輸入框存在的情況。
 document.body.addEventListener('focusin', () => {
            //軟鍵盤彈出的事件處理
            if(isIphone()){

            }
        })
  document.body.addEventListener('focusout', () => {
       //軟鍵盤收起的事件處理
        if(isIphone()){

        }
   })