H5软键盘弹出和收起在安卓和ios以及不同浏览器之间存在不同的表现形式，网上也找不到更全面的解决方案，为此自己研究出能兼容主流浏览器的解决方案。

问题

在做手机评论功能的交互时，必须要通过监听软键盘弹出和收起来实现，比如实现“点击回复评论弹出键盘，收起键盘就取消回复操作，输入框清空输入值”。

在研究过程中发现有以下几个问题：

1. 安卓非谷歌浏览器高度会变化，横屏时不会收起键盘
2. 安卓最新谷歌浏览器高度不会变化（页面上推），横屏时会收起键盘，但会触发resize事件
3. 安卓收起键盘后input可能并未失焦
4. 有些浏览器可能会多次触发resize事件
5. ios收起键盘页面会上滚

完整的代码放在最下面。

使用方式

当页面只有一个输入框的情况下使用

<script setup>
import keyboard from "./keyboard";
const vKeyboard = keyboard;

const keyboardFn = val => {
  console.log(val ? "弹出键盘" : "收起键盘")
};
</script>

<template>
    <input v-keyboard="keyboardFn" />
</template>

完整代码

const isIOS = /iphone|ipad|ipod/.test(navigator.userAgent.toLocaleLowerCase());
const originHeight =
  document.documentElement.clientHeight || document.body.clientHeight;
let scrollTop = 0;

const keyBoard = {
  mounted(el, binding, vnode) {
    const isFocus = ref(false);
    const isResiz = ref(0);
    const isChange = ref(false);
    const isHeight = ref(false);

    el.resizeFn = () => {
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight < originHeight) {
        isChange.value = true;
        isHeight.value = true;
      } else {
        isHeight.value = false;
      }
      if (isFocus.value) isResiz.value++;
    };
    
    if (!isIOS) {
      window.addEventListener("resize", el.resizeFn);
      // 第1种情况处理方式
      watch(isHeight, () => {
        if (isChange.value && isFocus.value && !isHeight.value) {
          binding.value(false);
        }
      });
      // 第2种情况处理方式
      watch(isResiz, () => {
        if (!isChange.value && isFocus.value && isResiz.value > 1) {
          binding.value(false);
        }
      });
    }

    el.handlerFocusin = () => {
      if (!isIOS) {
        isFocus.value = true;
        binding.value(true);
      } else {
        binding.value(true);
        scrollTop = document.documentElement.scrollTop;
      }
    };
    
    el.handlerFocusout = () => {
      if (!isIOS) {
        // 先失焦后后收起键盘的情况处理
        if (isFocus.value) {
          binding.value(false);
        }
        isFocus.value = false;
        isChange.value = false;
        isHeight.value = false;
        isResiz.value = 0;
      } else {
        binding.value(false);
        // 处理 iOS 收起软键盘页面会上滚问题
        setTimeout(() => window.scrollTo({ top: scrollTop }), 50);
      }
    };
    
    el.addEventListener("focusin", el.handlerFocusin);
    el.addEventListener("focusout", el.handlerFocusout);
  },
  
  unmounted(el) {
    window.removeEventListener("resize", el.resizeFn);
    el.removeEventListener("focusin", el.handlerFocusin);
    el.removeEventListener("focusout", el.handlerFocusout);
  }
};

export default keyBoard;

为了解决vueuse的useScreenOrientation不支持低版本系统的问题，尤其是ios，索性自己写了个可兼容的版本。

代码

新建一个useScreenOrientation.js文件，代码如下

import { shallowRef } from "vue";
import { useEventListener, useSupported } from "@vueuse/core";

// TypeScript dropped the inline types for these types in 5.2
// We vendor them here to avoid the dependency

// export type OrientationType = 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary'
// export type OrientationLockType = 'any' | 'natural' | 'landscape' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary'

// export interface ScreenOrientation extends EventTarget {
//   lock: (orientation: OrientationLockType) => Promise<void>
//   unlock: () => void
//   readonly type: OrientationType
//   readonly angle: number
//   addEventListener: (type: 'change', listener: (this: this, ev: Event) => any, useCapture?: boolean) => void
// }

// export interface UseScreenOrientationReturn extends Supportable {
//   orientation: ShallowRef<OrientationType | undefined>
//   angle: ShallowRef<number>
//   lockOrientation: (type: OrientationLockType) => Promise<void>
//   unlockOrientation: () => void
// }

/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 *
 * @__NO_SIDE_EFFECTS__
 */
export function useScreenOrientation(options = {}) {
  const isSupported = useSupported(
    () => window && "screen" in window && "orientation" in window.screen
  );

  const screenOrientation = isSupported.value ? window.screen.orientation : {};

  const orientation = shallowRef(screenOrientation.type);
  const angle = shallowRef(screenOrientation.angle || 0);

  const isIOS = /iphone|ipad|ipod/.test(
    navigator.userAgent.toLocaleLowerCase()
  );
  const getLandscape = () => {
    if (isIOS && Object.prototype.hasOwnProperty.call(window, "orientation")) {
      return Math.abs(window.orientation) === 90;
    }
    return window.innerHeight / window.innerWidth < 1;
  };

  if (isSupported.value) {
    // 这部分是原代码
    useEventListener(
      window,
      "orientationchange",
      () => {
        orientation.value = screenOrientation.type;
        angle.value = screenOrientation.angle;
      },
      { passive: true }
    );
  } else {
    // 新增兼容低版本
    const landscapeChange = () => {
      orientation.value = getLandscape()
        ? "landscape-primary"
        : "portrait-primary";
    };
    landscapeChange();
    useEventListener(
      window,
      "orientationchange",
      () => {
        landscapeChange();
      },
      { passive: true }
    );
  }

  const lockOrientation = type => {
    if (isSupported.value && typeof screenOrientation.lock === "function")
      return screenOrientation.lock(type);

    return Promise.reject(new Error("Not supported"));
  };

  const unlockOrientation = () => {
    if (isSupported.value && typeof screenOrientation.unlock === "function")
      screenOrientation.unlock();
  };

  return {
    isSupported,
    orientation,
    angle,
    lockOrientation,
    unlockOrientation
  };
}