H5软键盘弹起处理

当软键盘弹起，会改变当前window.innerHeight, 监听这个值的变化
innerWidth\innerHeight 只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

/*
    function downCb  软键盘缩回回调
    function upCb  软键盘弹起回调
*/
export const windowResize = (downCb,upCb) => {
    var clientHeight = window.innerHeight;// 先获取doc 的高度
    downCb = typeof downCb === 'function' ? downCb : function(){};
    upCb = typeof upCb === 'function' ? upCb : function(){};
    window.addEventListener("resize", () => {
          var height = window.innerHeight; // 监听resize，再次获取height
          if(height === clientHeight){  // 如果高度不变，即键盘没有弹起，或者已经缩回
              downCb();
         }
          if(height < clientHeight){  // 如果高度较小，即键盘弹起
              upCb();
         }
     })
}

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦