JavaScript Navigator virtualKeyboard Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word VIRTUALKEYBOARD

Definition

navigator.virtualKeyboard is a read-only property that returns a VirtualKeyboard object — the entry point to the VirtualKeyboard API for controlling layout when the on-screen keyboard appears on phones and tablets (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.virtualKeyboard. Start with this line.

JavaScript
navigator.virtualKeyboard
CallWhat it does
navigator.virtualKeyboardPrimary signature.

Built into the browser. Read navigator.virtualKeyboard on Navigator — no import required.

Library declarations
JavaScript
navigator.virtualKeyboard

Parameters

ParameterDescription
overlaysContentOptional. Default false; set true to overlay

Return Value

Return ValueDescription
*VirtualKeyboard (EventTarget)

JavaScript Examples

Example 1 — Feature Detection

Check whether the VirtualKeyboard API is exposed before calling methods.

JavaScript
if ("virtualKeyboard" in navigator) {
  console.log("VirtualKeyboard available");
} else {
  console.log("VirtualKeyboard not supported");
}

console.log("secure:", window.isSecureContext);
Try It Yourself

How It Works

  1. Ask the browser. The in operator checks for the property.
  2. Gate your code. Only touch overlaysContent / events when present.
  3. Check HTTPS. MDN requires a secure context in supporting browsers.
  4. Expect gaps. Limited availability means Firefox and Safari omit the API.

Example 2 — Opt Out with overlaysContent

Tell the browser not to shrink the viewport; then inspect boundingRect.

JavaScript
if ("virtualKeyboard" in navigator) {
  const vk = navigator.virtualKeyboard;
  console.log("overlaysContent (before):", vk.overlaysContent); // false

  vk.overlaysContent = true;
  console.log("overlaysContent (after):", vk.overlaysContent);  // true

  const r = vk.boundingRect;
  console.log("rect:", r.x, r.y, r.width, r.height);
} else {
  console.log("VirtualKeyboard not supported");
}
Try It Yourself

How It Works

  1. Detect first. Exit early when the API is missing.
  2. Default is false. The browser may resize the viewport for the keyboard.
  3. Set true. You opt out — the keyboard overlays; you adapt the layout.
  4. Read boundingRect. Often zero when the keyboard is closed.

Example 3 — Listen for geometrychange

Update padding or sticky footers when the on-screen keyboard opens or closes.

JavaScript
if ("virtualKeyboard" in navigator) {
  const vk = navigator.virtualKeyboard;
  vk.overlaysContent = true;

  vk.addEventListener("geometrychange", () => {
    const { x, y, width, height } = vk.boundingRect;
    console.log("keyboard geometry:", x, y, width, height);
    // e.g. document.body.style.paddingBottom = height + "px";
  });

  console.log("listening for geometrychange");
} else {
  console.log("VirtualKeyboard not supported");
}
Try It Yourself

How It Works

  1. Opt out first. overlaysContent = true so your layout owns the space.
  2. Subscribe once. geometrychange fires when the keyboard appears or disappears.
  3. Read the rect. Use height to pad content or scroll the focused field into view.
  4. Test on device. Desktop often has no on-screen keyboard — expect quiet listeners.
Compatibility

Browser Support

Navigator.virtualKeyboard is part of the VirtualKeyboard API. MDN marks it Experimental and Limited availability (not Baseline). Requires a secure context.

✓ Experimental · Limited availability

Navigator.virtualKeyboard

Best support in Chromium-based browsers from version 94 (Chrome, Edge, Opera). Missing in Firefox and Safari. Always feature-detect.

Limited Not Baseline
Google Chrome 94+ (secure context)
Yes
Microsoft Edge 94+ (secure context)
Yes
Opera 80+ (Chromium)
Yes
Mozilla Firefox Not supported
No
Apple Safari Not supported
No
Internet Explorer Not supported
No
virtualKeyboard Chromium 94+

Bottom line: Ship behind a feature detect. See the MDN virtualKeyboard reference.

Frequently Asked Questions

A VirtualKeyboard object. You can opt out of automatic viewport resizing, read boundingRect, listen for geometrychange, and call show() / hide() when supported.
MDN marks it Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard. Always feature-detect and keep a fallback.
Yes. MDN lists it as a secure-context feature (HTTPS or localhost) in supporting browsers.
A Boolean on VirtualKeyboard. When true, you opt out of the browser shrinking the viewport for the on-screen keyboard — the keyboard overlays content and you adapt the layout yourself.
A DOMRect describing the current position and size of the virtual keyboard. Use it after geometrychange or when the keyboard is visible.
The API targets devices with on-screen keyboards. show() only works when a form control or contenteditable with virtualKeyboardPolicy "manual" is focused (and inputmode is not "none"). Always feature-detect.

Next: wakeLock

Learn how navigator.wakeLock accesses the Screen Wake Lock API.

wakeLock tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Navigator vendorSub Property JavaScript Navigator wakeLock Property