JavaScript Navigator virtualKeyboard Property

What You’ll Learn

navigator.virtualKeyboard is the experimental entry point to the VirtualKeyboard API. Learn overlaysContent, boundingRect, geometrychange, show() / hide(), secure-context rules, five examples, and try-it labs.

Introduction

On phones and tablets, focusing an input often opens an on-screen virtual keyboard. By default, many browsers shrink the visual viewport so the page does not sit under the keyboard.

The VirtualKeyboard API lets you take more control: opt out of that automatic resize, read the keyboard’s position and size, listen when it appears or disappears, and (when allowed) show or hide it from script.

Understanding the virtualKeyboard Property

navigator.virtualKeyboard is a read-only entry point. The useful work happens on the returned VirtualKeyboard object.

• overlaysContent — set true to stop the browser from auto-resizing the viewport for the keyboard.
• boundingRect — a DOMRect with x, y, width, height.
• geometrychange — event when the keyboard geometry changes (appear / disappear / resize).
• show() / hide() — programmatically show or hide when supported.
• Secure context — HTTPS / localhost required where supported.
• Limited support — feature-detect; desktop browsers often lack it.

📝 Syntax

General form of the property:

navigator.virtualKeyboard

Value

• A VirtualKeyboard object (when supported).

Common patterns

// MDN-style feature detect + opt out + geometry
if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
    console.log({ x, y, width, height });
  });
} else {
  console.log("VirtualKeyboard API not available — keep a CSS / viewport fallback.");
}

Examples Gallery

Examples follow MDN navigator.virtualKeyboard patterns. Prefer Try It Yourself on a Chromium mobile / tablet device over HTTPS — many desktops report the API missing.

const lines = [
  "virtualKeyboard: " + ("virtualKeyboard" in navigator ? "available" : "missing"),
  "isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));

virtualKeyboard: missing
isSecureContext: true
(or "available" on supporting Chromium mobile / tablet builds)

if (!("virtualKeyboard" in navigator)) {
  console.log("virtualKeyboard not supported");
} else {
  navigator.virtualKeyboard.overlaysContent = true;
  console.log("overlaysContent: " + navigator.virtualKeyboard.overlaysContent);
}

overlaysContent: true
(or "virtualKeyboard not supported")

if (!("virtualKeyboard" in navigator)) {
  console.log("virtualKeyboard not supported");
} else {
  const r = navigator.virtualKeyboard.boundingRect;
  console.log(
    "x=" + r.x + " y=" + r.y + " w=" + r.width + " h=" + r.height
  );
}

x=0 y=0 w=0 h=0
(non-zero when the on-screen keyboard is visible on a supporting device)

if (!("virtualKeyboard" in navigator)) {
  console.log("virtualKeyboard not supported");
} else {
  navigator.virtualKeyboard.overlaysContent = true;
  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
    console.log("geometrychange:", { x, y, width, height });
  });
  console.log("Listening for geometrychange — focus an input on a device with an OSK.");
}

Listening for geometrychange — focus an input on a device with an OSK.
(then geometrychange logs when the keyboard moves)

function tryShowHide() {
  if (!("virtualKeyboard" in navigator)) {
    return "virtualKeyboard not supported";
  }
  const vk = navigator.virtualKeyboard;
  if (typeof vk.show !== "function" || typeof vk.hide !== "function") {
    return "show/hide not available on this build";
  }
  // On a real device, focus an <input> first, then:
  // vk.show();
  // vk.hide();
  return "show/hide methods exist — test with a focused input on mobile";
}

console.log(tryShowHide());

virtualKeyboard not supported
(or the show/hide message on a supporting device)

🚀 Common Use Cases

• Chat / messaging UIs — keep the composer above the keyboard using boundingRect.height.
• Full-screen editors — opt out of viewport shrink and draw your own inset.
• Forms in PWAs — listen for geometrychange to scroll focused fields into view.
• Custom keyboards / toolbars — align sticky toolbars with the OSK top edge.
• Progressive enhancement — fall back to visualViewport / CSS when the API is missing.

📝 Notes

• Experimental & Limited availability — not Baseline; feature-detect always.
• Not Deprecated or Non-standard — Experimental banner only.
• Secure context required (HTTPS / localhost).
• Returns a VirtualKeyboard object; main pieces are overlaysContent, boundingRect, geometrychange, show(), hide().
• Related: wakeLock, userActivation, keyboard, Window.

💡 Best Practices