h5 移动端 监听软键盘弹起、收起事件，微信键盘收起事件监听★★★★★★★★★★★★★★★★【微信键盘事件】

前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在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.ο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()）{

        }
   })

【测试成功】微信开发时，会遇到当在弹窗里输入手机号，验证码之后，弹窗隐藏后，但是发现页面内容跟随屏幕向上滚动了一断距离，我们可以通过监听微信键盘收起后的事件，把页面位置重置。

 /*弹框fixd定位后，键盘收起后，位置不对应*/
        document.body.addEventListener('focusout', function () {
            setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        });