VirtualKeyboard

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

TheVirtualKeyboard interface of theVirtualKeyboard 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.

TheVirtualKeyboard 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 theVirtualKeyboard interface by usingnavigator.virtualKeyboard.

Instance properties

TheVirtualKeyboard interface inherits properties from its parent,EventTarget.

VirtualKeyboard.boundingRectRead onlyExperimental: A DOMRect that describes the geometry of the virtual keyboard.
VirtualKeyboard.overlaysContentExperimental: A Boolean that defines whether the browser should stop handling the on-screen virtual keyboard.

Instance methods

TheVirtualKeyboard interface inherits methods from its parent,EventTarget.

VirtualKeyboard.show()Experimental: Show the virtual keyboard.
VirtualKeyboard.hide()Experimental: Hide the virtual keyboard.

Events

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

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:

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