Limited supportUse with care and provide a fallback when broad support matters.
Other Limited support

Virtual keyboard

The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Other

Overview

The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
virtualkeyboardpolicy
Experimental
94
94
94
DOM API
virtualKeyboardPolicy
Experimental

The virtualKeyboardPolicy property of the HTMLElement interface gets and sets a string indicating the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available, if the element's content is editable (for example, it is an input or textarea element, or an element with the…
94
94
94
virtualKeyboard
Experimental

The virtualKeyboard read-only property of the navigator interface returns a reference to the VirtualKeyboard instance object.
94
94
94
VirtualKeyboard
Experimental

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.
94
94
94
boundingRect
Experimental

The boundingRect property of the VirtualKeyboard interface contains a DOMRect indicating the position and size of the on-screen virtual keyboard that overlays the web page.
94
94
94
geometrychange_event
Experimental

The geometrychange event of the VirtualKeyboard interface fires when the on-screen virtual keyboard is toggled between shown and hidden states.
94
94
94
hide
Experimental

The hide() method of the VirtualKeyboard interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the VirtualKeyboard_API.
94
94
94
overlaysContent
Experimental

The overlaysContent property of the VirtualKeyboard interface can be used to opt out of the automatic way in which browsers handle on-screen virtual keyboards by reducing the size of the viewport to make space for them.
94
94
94
show
Experimental

The show() method of the VirtualKeyboard interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the virtualkeyboardpolicy attribute on contenteditable elements as explained in Control the virtual keyboard on contenteditable elements.
94
94
94
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.show();
navigator.virtualKeyboard.addEventListener('geometrychange', (e) => {
  console.log('Keyboard area:', e.target.boundingRect);
});

Use cases

  • Use Virtual keyboard

    Use Virtual keyboard when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Virtual keyboard to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Virtual keyboard in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Virtual keyboard supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features