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 移动端 监听软键盘弹起、收起