VirtualKeyboard API

Konzept

Die VirtualKeyboard-API besteht aus drei Teilen:

• Die VirtualKeyboard Schnittstelle, auf die ber navigator.virtualKeyboard zugegriffen wird, wird verwendet, um die automatische virtuelle Tastaturhandhabung zu deaktivieren, die virtuelle Tastatur programmgesteuert anzuzeigen oder zu verbergen sowie um die aktuelle Position und Gre der virtuellen Tastatur zu erhalten.
• Die keyboard-inset-* CSS-Umgebungsvariablen liefern Informationen ber die Position und Gre der virtuellen Tastatur.
• Das virtualkeyboardpolicy Attribut gibt an, ob die virtuelle Tastatur bei contenteditable Elementen erscheinen soll.

Ablehnen des automatischen Verhaltens der virtuellen Tastatur

Um das automatische Verhalten der virtuellen Tastatur des Browsers zu deaktivieren, verwenden Sie navigator.virtualKeyboard.overlaysContent = true. Der Browser verndert dann nicht mehr automatisch die Gre des Ansichtsfensters, um Platz fr die virtuelle Tastatur zu machen, die stattdessen Ihre Inhalte berlagern wird.

Erkennen der Geometrie der virtuellen Tastatur mit JavaScript

Sobald Sie das Standardverhalten des Browsers deaktiviert haben, knnen Sie die aktuelle Geometrie der virtuellen Tastatur mit navigator.virtualKeyboard.boundingRect abrufen und das Layout entsprechend mit CSS und JavaScript anpassen. Zustzlich knnen Sie auf Geometrienderungen hren, z.B. wenn die Tastatur ein- oder ausgeblendet wird, indem Sie das geometrychange Ereignis verwenden.

Dies ist ntzlich, um wichtige UI-Elemente in dem Bereich zu positionieren, der nicht von der virtuellen Tastatur berdeckt wird.

Der folgende Codeausschnitt verwendet das geometrychange Ereignis, um zu erkennen, wann sich die Geometrie der virtuellen Tastatur ndert; anschlieend wird die boundingRect Eigenschaft abgefragt, um die Gre und Position der virtuellen Tastatur zu ermitteln:

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

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

Erkennen der Geometrie der virtuellen Tastatur mit CSS-Umgebungsvariablen

Die VirtualKeyboard-API stellt auch die folgenden CSS-Umgebungsvariablen zur Verfgung: keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width und keyboard-inset-height.

Die keyboard-inset-* CSS-Umgebungsvariablen sind ntzlich, um Ihr Layout an das Erscheinen der virtuellen Tastatur mit CSS anzupassen. Sie definieren ein Rechteck durch seine oberen, rechten, unteren und linken Einrckungen vom Rand des Ansichtsfensters. Die width- und height-Variablen sind ebenfalls verfgbar, wenn erforderlich.

Der folgende Codeausschnitt verwendet die keyboard-inset-height CSS-Variable, um Platz fr die virtuelle Tastatur unter der Liste von Nachrichten und dem Eingabefeld in einer chathnlichen Anwendung zu reservieren. Wenn die virtuelle Tastatur verborgen ist, gibt die env() Funktion 0px zurck und der keyboard Rasterbereich ist verborgen. Die Nachrichten- und Eingabeelemente knnen die volle Hhe des Ansichtsfensters einnehmen. Wenn die virtuelle Tastatur erscheint, erhlt der keyboard Rasterbereich die Hhe der virtuellen Tastatur.

<ul id="messages"></ul>
<input type="text" />

body {
  display: grid;
  margin: 0;
  height: 100vh;
  grid-template:
    "messages" 1fr
    "input" auto
    "keyboard" env(keyboard-inset-height, 0px);
}

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

Steuerung der virtuellen Tastatur bei contenteditable Elementen

Standardmig lsen Elemente, die das contenteditable Attribut verwenden, auch die virtuelle Tastatur aus, wenn sie angetippt oder angeklickt werden. In bestimmten Situationen kann es wnschenswert sein, dieses Verhalten zu verhindern und die virtuelle Tastatur stattdessen nach einem anderen Ereignis anzuzeigen.

Setzen Sie das virtualkeyboardpolicy Attribut auf manual, um die Standardbehandlung der virtuellen Tastatur im Browser zu verhindern und stattdessen mit den show() und hide() Methoden der VirtualKeyboard Schnittstelle selbst zu steuern.

Der folgende Codeausschnitt zeigt, wie das virtualkeyboardpolicy Attribut und die navigator.virtualKeyboard.show() Methode verwendet werden, um die virtuelle Tastatur stattdessen bei einem Doppelklick anzuzeigen:

<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>

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

  const editor = document.getElementById("editor");
  editor.addEventListener("dblclick", () => {
    navigator.virtualKeyboard.show();
  });
}

Schnittstellen

VirtualKeyboard

Bietet Funktionen zum Abrufen von Tastatur-Layoutkarten und zum Umschalten der Erfassung von Tastenanschlgen der physischen Tastatur.

Erweiterungen fr andere Schnittstellen

Navigator.virtualKeyboard Schreibgeschtzt

Gibt eine Referenz auf die VirtualKeyboard API zurck, um die Kontrolle ber die virtuelle Bildschirmtastatur zu bernehmen.

HTMLElement.virtualkeyboardpolicy

Ein String, der angibt, ob die Standardrichtlinie des Browsers verwendet werden soll, um die virtuelle Tastatur anzuzeigen, wenn das Element fokussiert ist, oder ob das Anzeigen der virtuellen Tastatur manuell gesteuert werden soll.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Volle Kontrolle mit der VirtualKeyboard-API