VirtualKeyboard

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die VirtualKeyboard-Schnittstelle der VirtualKeyboard API ist auf Geräten nützlich, die Bildschirm-Tastaturen haben, wie Tablets, Mobiltelefone oder andere Geräte, bei denen möglicherweise keine Hardwaretastatur verfügbar ist.

Die VirtualKeyboard-Schnittstelle ermöglicht es, das automatische Verhalten der Webbrowser in Bezug auf Bildschirm-Tastaturen zu umgehen, indem die Höhe des Viewports reduziert wird, um Platz für die Bildschirm-Tastatur zu schaffen. Sie können verhindern, dass der Browser die Größe des Viewports ändert, die Position und Größe der Bildschirm-Tastatur erkennen und das Layout Ihrer Webseite entsprechend anpassen sowie die Bildschirm-Tastatur programmatisch ein- oder ausblenden.

Sie greifen auf die VirtualKeyboard-Schnittstelle über navigator.virtualKeyboard zu.

EventTarget VirtualKeyboard

Instanz-Eigenschaften

Die VirtualKeyboard-Schnittstelle erbt Eigenschaften von ihrem Elternteil, EventTarget.

VirtualKeyboard.boundingRect Schreibgeschützt Experimentell

Ein DOMRect, das die Geometrie der Bildschirm-Tastatur beschreibt.

VirtualKeyboard.overlaysContent Experimentell

Ein Boolean, der bestimmt, ob der Browser die Bildschirm-Tastatur aufhören soll zu verwalten.

Instanz-Methoden

Die VirtualKeyboard-Schnittstelle erbt Methoden von ihrem Elternteil, EventTarget.

VirtualKeyboard.show() Experimentell

Zeigt die Bildschirm-Tastatur an.

VirtualKeyboard.hide() Experimentell

Verbirgt die Bildschirm-Tastatur.

Ereignisse

geometrychange Experimentell

Wird ausgelöst, wenn sich die Geometrie der Bildschirm-Tastatur ändert, was passiert, wenn die Bildschirm-Tastatur erscheint oder verschwindet.

Beispiel

Das folgende Beispiel demonstriert, wie man das automatische Verhalten der Bildschirm-Tastatur umgeht und die Geometrie der Bildschirm-Tastatur auf der Webseite erkennt:

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

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

Spezifikationen

Specification
VirtualKeyboard API
# the-virtualkeyboard-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
VirtualKeyboard
Experimental
boundingRect
Experimental
geometrychange event
Experimental
hide
Experimental
overlaysContent
Experimental
show
Experimental

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.
See implementation notes.

Siehe auch