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

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.οnresize=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()）{

  }
})

 

vue項目代碼：

    methods: {
      // input聚焦
      iptFocus(){
        // ios
        if(this.isIos()) this.isFocus = true;
      },
      // input失去焦點
      iptBlur(){
        // ios
        if(this.isIos()) this.isFocus = false;
      },
      isIos(){
        var m = navigator.userAgent;
        var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        let result = isIos ? true : false;
        return result;
      },
      // android
      handleResize(){
        var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if(resizeHeight < this.originHeight){
          //當軟鍵盤彈起，在此處操作
          if(!this.isIos()) this.isFocus = true;
        }else{
          //當軟鍵盤收起，在此處操作
          if(!this.isIos()) this.isFocus = false;
        }
      },
    }

mounted(){
    this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
    window.addEventListener('resize',this.handleResize);
}

 

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