h5键盘弹出收起时引起的页面变化

h5键盘弹出收起时引起的页面变化

键盘弹出时会导致窗口发生变化，置于底部的操作项会被顶上来，所以在键盘弹出的时候处理一下页面节点

• 通过监听页面窗口大小变化判断键盘状态
• 键盘弹出时隐藏底部操作项
• 在页面加载完成时执行即可

export function keyboardMonitor() {
  const originalHeight =
    document.documentElement.clientHeight || document.body.clientHeight; //监听事件
  window.onresize = () => {
    return (() => {
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //软键盘弹起与隐藏 都会引起窗口的高度发生变化
      console.log(resizeHeight, originalHeight);
      const pageFooter = document.getElementsByClassName("page-footer");
      if (resizeHeight * 1 < originalHeight * 1) {
        // @ts-ignore
        pageFooter[0].style.display = "none";
      } else {
        // @ts-ignore
        pageFooter[0].style.display = "block";
      }
    })();
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20