W3cubDocs

/Web APIs

VirtualKeyboard: geometrychange event

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

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

The geometrychange event is useful to detect when the virtual keyboard appears and disappears, so you can adjust the layout as appropriate. This is necessary when using the Virtual Keyboard API to disable the browser's default automatic resizing of the viewport when the virtual keyboard is shown and hidden.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js

navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {});

navigator.virtualKeyboard.ongeometrychange = (event) => {};

Event type

A generic Event.

Examples

The following code snippet uses the geometrychange event to detect when the virtual keyboard geometry changes, and then accesses the boundingRect property to query the size and position of the virtual keyboard:

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
geometrychange_event 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/geometrychange_event