VirtualKeyboard: geometrychange event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
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.
addEventListener("geometrychange", (event) => { })
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:
if ("virtualKeyboard" in navigator) {
navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
const { x, y, width, height } = event.target.boundingRect;
});
}
Specifications
| Specification |
|---|
| VirtualKeyboard API # dom-virtualkeyboard-ongeometrychange |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
geometrychange event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.