VirtualKeyboard

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

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 Nur lesbar

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

VirtualKeyboard.overlaysContent

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()

Zeigt die Bildschirm-Tastatur an.

VirtualKeyboard.hide()

Verbirgt die Bildschirm-Tastatur.

Ereignisse

geometrychange

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

BCD tables only load in the browser

Siehe auch