H5 移动端 监听虚拟键盘问题

解析：
在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()）{
 
        }
   })

解决方法二：

import * as MonitoringSoftKeyboard from "@/util/MonitoringSoftKeyboard";

mounted() { 
    this.$nextTick(() => {
      if (AppVerUtil.IsIos()) {
        //H5 移动端 监听虚拟键盘问题
        window.addEventListener( "focusin", () => {
          //软键盘弹出的事件处理
          MonitoringSoftKeyboard.FocusinHandler(() => {
            this.footerShow = false;
          });
        },false);
        window.addEventListener( "focusout", () => {
            //软键盘收起的事件处理
            MonitoringSoftKeyboard.FocusinHandler(() => {
              this.footerShow = true;
            });
        },false);
      } 
      else if (AppVerUtil.IsAndr()) {
        let orgHeight = document.documentElement.clientHeight || document.body.clientHeight;
        window.addEventListener( "resize", () => {
          MonitoringSoftKeyboard.ResizeHandler( () => {
            this.footerShow = false;
          }, () => {
            this.footerShow = true;
          },orgHeight);
        },false);
      } 
    });
  }

2.创建MonitoringSoftKeyboard.js

import * as ObjectUtil from './ObjectUtil'
let isReset = true
const FocusinHandler = (foucsCallback) => {
    isReset = false
    if (!ObjectUtil.IsEmpty(foucsCallback))//不为空
        foucsCallback()
}
 
const ResizeHandler = (foucsCallback, blurCallback, orgHeight) => {
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
    const activeElement = document.activeElement
    if (resizeHeight < orgHeight - 30) {
        //当软键盘弹起，在此处操作
        // console.log("smallSize", !ObjectUtil.IsEmpty(foucsCallback))
        if (activeElement && (activeElement.tagName.toUpperCase() === "INPUT" || activeElement.tagName.toUpperCase() === "TEXTAREA")) {
            setTimeout(() => {
                activeElement.scrollIntoView({ block: 'center' });
            }, 0)
            if (!ObjectUtil.IsEmpty(foucsCallback))
                foucsCallback()
        }
    } else {
        // 当软键盘收起，在此处操作
        // console.log("oldSize", !ObjectUtil.IsEmpty(blurCallback))
        if (!ObjectUtil.IsEmpty(blurCallback))
            blurCallback()
    }
}



export {
    FocusinHandler,
    ResizeHandler
}