h5 移動端 監聽虛擬鍵盤問題


在安卓  、ios中虛擬鍵盤會遮擋輸入框 使用固定定位的方式將輸入框的位置固定好。不管是否彈出虛擬鍵盤都固定在那里,根據自己的情況而定。我的就是直接固定就好。不會被遮擋了,我的是在輸入框彈起的上面並且在虛擬鍵盤上面。

有時候在手機內置的瀏覽器中打開虛擬鍵盤的問題好好的,可是用微信打開它就不正常了,

當h5 app有tabbar的時候  點擊輸入框的時候,虛擬鍵盤就會吧底部的tabbar一起頂上去

微信的內置的瀏覽器相當於QQ瀏覽器

解決方法

一、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()){

        }
   })

  總結:在adnroid中如何監聽軟鍵盤的彈起與收起,是利用的窗口的高度發生變化 

     window.onresize事件來做突破點的,但是ios中軟鍵盤的彈起收起並不觸發window.onresize事件。 

     1.在ios中軟鍵盤彈起時,僅會引起$(‘body’).scrollTop值改變,但是我們可以通過輸入框的獲取焦點情況來做判斷,但也只能在ios中采用這個方案,因為在android中存在主動收起鍵盤后,但輸入框並沒有失焦,而ios中鍵盤收起后就會失焦; 
     2.在android中軟鍵盤彈起或收起時,會改變window的高度,因此監聽window的onresize事件;

 

關注微信小程序


免責聲明!

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



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