W3cubDocs

/Web APIs

VirtualKeyboard

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The VirtualKeyboard interface of the VirtualKeyboard API is useful on devices that have on-screen virtual keyboards, such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.

The VirtualKeyboard interface makes it possible to opt out of the automatic way browsers handle on-screen virtual keyboards by reducing the height of the viewport to make room for the virtual keyboard. You can prevent the browser from changing the size of the viewport, detect the position and size of the virtual keyboard — adapting the layout of your web page as a follow-up — and programmatically show or hide the virtual keyboard.

You access the VirtualKeyboard interface by using navigator.virtualKeyboard.

EventTarget VirtualKeyboard

Instance properties

The VirtualKeyboard interface doesn't inherit any properties.

VirtualKeyboard.boundingRect Read only Experimental

A DOMRect that describes the geometry of the virtual keyboard.

VirtualKeyboard.overlaysContent Experimental

A Boolean that defines whether the browser should stop handling the on-screen virtual keyboard.

Events

geometrychange Experimental

Fires when the geometry of the on-screen virtual keyboard changes, which happens when the virtual keyboard appears or disappears.

Instance methods

The VirtualKeyboard interface doesn't inherit any methods.

VirtualKeyboard.show() Experimental

Show the virtual keyboard.

VirtualKeyboard.hide() Experimental

Hide the virtual keyboard.

Example

The following example demonstrates how to opt out of the automatic virtual keyboard behavior, and detect the geometry of the virtual keyboard in the web page:

js

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

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
VirtualKeyboard 94 94 No No 80 No 94 94 No 66 No 17.0
boundingRect 94 94 No No 80 No 94 94 No 66 No 17.0
geometrychange_event 94 94 No No 80 No 94 94 No 66 No 17.0
hide 94 94 No No 80 No 94 94 No 66 No 17.0
overlaysContent 94 94 No No 80 No 94 94 No 66 No 17.0
show 94 94 No No 80 No 94 94 No 66 No 17.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard