Virtual Keyboard API Demo (+ iOS workaround)

const { isIos } = useDevice();
const dock = ref<HTMLElement | null>(null);

onMounted(() => {
  // For chromium
  if ("virtualKeyboard" in navigator) {
    navigator.virtualKeyboard.overlaysContent = true;
  }
  // For iOS
  if (isIos && window.visualViewport) {
    const vv = window.visualViewport;

    function fixPosition() {
      const ih = window.innerHeight;

      if (dock.value) {
        dock.value.style.bottom = `${Math.max(0, ih - vv.height - vv.offsetTop)}px`;
      }
    }

    vv.addEventListener("resize", fixPosition);
    vv.addEventListener("scroll", fixPosition);
    document.addEventListener("gesturechange", fixPosition);
    document.addEventListener("focusout", fixPosition);

    fixPosition();

    onBeforeUnmount(() => {
      vv.removeEventListener("resize", fixPosition);
      vv.removeEventListener("scroll", fixPosition);
      document.removeEventListener("gesturechange", fixPosition);
      document.removeEventListener("focusout", fixPosition);
    });
  }
});

<div ref="dock" style="bottom: env(keyboard-inset-height, 0);" class="fixed inset-x-0">
  Stick to the damn bottom
</div>