手机键盘弹出对布局的影响

问题描述：

项目中页面底部footer标签是fixed定位，输入法键盘弹出导致页面底部按钮上浮，由于时间紧迫，想到的解决办法：
h5 移动端 监听输入法的键盘弹起、收起，即：
键盘弹出把footer隐藏，键盘隐藏则footer显示，问题来了，H5怎么监听键盘弹出事件，下面直接上代码

一、Android
//获取原窗口的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize = function(){
    //键盘弹起与隐藏都会引起窗口的高度发生变化
       var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        if(resizeHeight < originalHeight){
         //当软键盘弹起，在此处操作
          $("#window-bottom").css("display","none"); //隐藏按钮
         }else{
         //当软键盘收起，在此处操作
          $("#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()）{
 
        }
   })

ps:

andriod中如何监听软键盘的弹起与收起，是利用的窗口的高度发生变化
window.onresize事件来做突破点的，但是ios中软键盘的弹起收起并不触发window.onresize事件。

总结：

1.在ios中软键盘弹起时，仅会引起$(‘body’).scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；
2.在android中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；

百度搜索该问题时，搜索出的其他几个问题如下：

一、H5 ios移动端，键盘收起以后页面不缩回，解决办法：

$("input").on("blur",function(){
    window.scroll(0,0); //失焦后强制让页面归位
});

二、安卓手机弹出键盘遮盖输入框问题，解决办法：

if (/Android/.test(navigator.appVersion)) {
      window.addEventListener('resize', function() {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
          window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded()
          }, 0)
        }
      })
    }