监听键盘弹起

const keyboardHeight = ref(0);
const watchResize = () => {
  console.log(111, window.innerHeight);

  const ua = window.navigator.userAgent.toLocaleLowerCase();
  const isIOS = /iphone|ipad|ipod/.test(ua);
  const isAndroid = /android/.test(ua);
  if (isIOS) {
    const $input = document.getElementById("ipt");
    $input.addEventListener(
      "focus",
      () => {
        // 处理键盘弹出后所需的页面逻辑
        keyboardHeight.value = "-56px";
      },
      false
    );

    $input.addEventListener(
      "blur",
      () => {
        // 处理键盘收起后所需的页面逻辑
        keyboardHeight.value = "0px";
      },
      false
    );
  } else if (isAndroid) {
    /*键盘弹起后页面高度变小*/
    const originHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    window.addEventListener(
      "resize",
      () => {
        const resizeHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        if (resizeHeight < originHeight) {
          // 键盘弹起所后所需的页面逻辑
          console.log(111, "键盘弹起");
          keyboardHeight.value = "-56px";
        } else {
          // 键盘弹起所后所需的页面逻辑
          console.log(111, "键盘收起");
          keyboardHeight.value = "0px";
        }
      },
      false
    );
  }
};

   <div class="footer" :style="{ bottom: keyboardHeight }">
      <div class="footer-input">
        <div
          id="ipt"
          contenteditabel
          type="text"
          maxLength="5000"
          :disabled="isAnalyzing"
          placeholder="有问题尽管问我～"
          :class="['input_txt', { cursor_freeze: isAnalyzing }]"
          @input="handleMessageChange"
        />

        <input
          id="btnSend"
          type="button"
          value="发 送"
          :disabled="isAnalyzing"
          class="input_sub"
          @click="send"
        />
      </div>
    </div>