uniapp h5,监听软键盘改变高度

866 阅读1分钟

image.png

const originalHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  // 监听键盘高度改变内容高度
  window.onresize = () => {
    return (() => {
      //键盘弹起与隐藏都会引起窗口的高度发生变化
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      console.log("进入到判断页面高度=========");
      console.log("页面初始高度=========" + originalHeight);
      console.log("软键盘弹起高度=========" + resizeHeight);
      if (resizeHeight - 0 < originalHeight - 0) {
        //当软键盘弹起,在此处操作
        console.log("进入到软键盘弹起=========");
        document
          .querySelector("body")
          .setAttribute("style", "height:" + originalHeight + "px;");
        scrollerHeight.value = resizeHeight;
      } else {
        //当软键盘收起,在此处操作
        console.log("进入到软键盘收起=========");
        document.querySelector("body").setAttribute("style", "height:100%;");
        scrollerHeight.value = "100%"; //这边自定义,可能要减
      }
    })();
  };