virtual-keyboard-api.md

The Virtual Keyboard API

Definition

With the Virtual Keyboard API, authors can get information about the Virtual Keyboard. This is defined in the Virtual Keyboard API Specification

The VirtualKeyboard API provides authors with greater control over the visibility of the Virtual Keyboard, and greater ability to adapt the layout of web pages when VK visibility changes

Using the API

Authors can listen for a geometrychange event to get the Virtual Keyboard size.

if ("virtualKeyboard" in navigator) {
	navigator.virtualKeyboard.addEventListener('geometrychange', () => {
		console.log(vk.boundingRect);
	});
}

Additionally they can also trigger it to show or hide.

Overlays Content Mode

Using the Virtual Keyboard API, authors can change the behavior of the Virtual Keyboard. The only option they have now, is to enable “Overlays Content” mode. This behavior needs to be enabled through JavaScript:

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

Once enabled, this mode does not resize the Layout Viewport, ICB, nor Visual Viewport when the Virtual Keyboard is shown.

Browser Support

The Virtual Keyboard API is only implemented in Chromium-based browsers. Other browser vendors have been asked on their position towards this API:

• Firefox: mozilla/standards-positions#531
• WebKit: WebKit/standards-positions#16