Die VirtualKeyboard-API bietet Entwicklern die Möglichkeit, das Layout ihrer Anwendungen zu steuern, wenn die virtuelle Tastatur auf Geräten wie Tablets, Mobiltelefonen oder anderen Geräten, bei denen möglicherweise keine Hardware-Tastatur verfügbar ist, ein- und ausgeblendet wird.

Webbrowser behandeln virtuelle Tastaturen in der Regel eigenständig, indem sie die Höhe des Ansichtsfensters anpassen und beim Fokussieren zu Eingabefeldern scrollen.

Die Abbildung unten veranschaulicht den Unterschied in der Ansichtsfensterhöhe und der Scrollposition auf einer Webseite, wenn die virtuelle Tastatur des Geräts verborgen ist und wenn sie angezeigt wird.

Komplexere Anwendungen oder spezielle Geräte wie Mehrbildschirm-Mobiltelefone erfordern möglicherweise mehr Kontrolle über das Layout, wenn die virtuelle Tastatur angezeigt wird.

Die Abbildung unten zeigt, was auf einem Dual-Screen-Gerät passiert, wenn die virtuelle Tastatur nur auf einem der beiden Bildschirme erscheint. Das Ansichtsfenster wird auf beiden Bildschirmen kleiner, um der virtuellen Tastatur Platz zu machen, sodass auf dem Bildschirm, auf dem die virtuelle Tastatur nicht angezeigt wird, ungenutzter Platz bleibt.

Die VirtualKeyboard-API kann verwendet werden, um die automatische Handhabung der virtuellen Tastatur durch den Browser abzulehnen und stattdessen die vollständige Kontrolle darüber zu übernehmen. Mit der VirtualKeyboard-API erscheint und verschwindet die Tastatur weiterhin bei Bedarf, wenn Formularelemente fokussiert werden, aber das Ansichtsfenster ändert sich nicht, und Sie können JavaScript und CSS verwenden, um Ihr Layout anzupassen.

Konzept

Die VirtualKeyboard-API besteht aus drei Teilen:

• DieVirtualKeyboard Schnittstelle, auf die übernavigator.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 Größe der virtuellen Tastatur zu erhalten.
• Diekeyboard-inset-* CSS-Umgebungsvariablen liefern Informationen über die Position und Größe der virtuellen Tastatur.
• Dasvirtualkeyboardpolicy Attribut gibt an, ob die virtuelle Tastatur beicontenteditable Elementen erscheinen soll.

Ablehnen des automatischen Verhaltens der virtuellen Tastatur

Um das automatische Verhalten der virtuellen Tastatur des Browsers zu deaktivieren, verwenden Sienavigator.virtualKeyboard.overlaysContent = true. Der Browser verändert dann nicht mehr automatisch die Größe des Ansichtsfensters, um Platz für 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, können Sie die aktuelle Geometrie der virtuellen Tastatur mitnavigator.virtualKeyboard.boundingRect abrufen und das Layout entsprechend mit CSS und JavaScript anpassen. Zusätzlich können Sie auf Geometrieänderungen hören, z.B. wenn die Tastatur ein- oder ausgeblendet wird, indem Sie dasgeometrychange Ereignis verwenden.

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

Der folgende Codeausschnitt verwendet dasgeometrychange Ereignis, um zu erkennen, wann sich die Geometrie der virtuellen Tastatur ändert; anschließend wird dieboundingRect Eigenschaft abgefragt, um die Größe 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 folgendenCSS-Umgebungsvariablen zur Verfügung:keyboard-inset-top,keyboard-inset-right,keyboard-inset-bottom,keyboard-inset-left,keyboard-inset-width undkeyboard-inset-height.

Diekeyboard-inset-* CSS-Umgebungsvariablen sind nützlich, um Ihr Layout an das Erscheinen der virtuellen Tastatur mit CSS anzupassen. Sie definieren ein Rechteck durch seine oberen, rechten, unteren und linken Einrückungen vom Rand des Ansichtsfensters. Diewidth- undheight-Variablen sind ebenfalls verfügbar, wenn erforderlich.

Der folgende Codeausschnitt verwendet diekeyboard-inset-height CSS-Variable, um Platz für die virtuelle Tastatur unter der Liste von Nachrichten und dem Eingabefeld in einer chatähnlichen Anwendung zu reservieren. Wenn die virtuelle Tastatur verborgen ist, gibt dieenv() Funktion0px zurück und derkeyboard Rasterbereich ist verborgen. Die Nachrichten- und Eingabeelemente können die volle Höhe des Ansichtsfensters einnehmen. Wenn die virtuelle Tastatur erscheint, erhält derkeyboard Rasterbereich die Höhe der virtuellen Tastatur.

<ul></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 beicontenteditable Elementen

Standardmäßig lösen Elemente, die dascontenteditable Attribut verwenden, auch die virtuelle Tastatur aus, wenn sie angetippt oder angeklickt werden. In bestimmten Situationen kann es wünschenswert sein, dieses Verhalten zu verhindern und die virtuelle Tastatur stattdessen nach einem anderen Ereignis anzuzeigen.

Setzen Sie dasvirtualkeyboardpolicy Attribut aufmanual, um die Standardbehandlung der virtuellen Tastatur im Browser zu verhindern und stattdessen mit denshow() undhide() Methoden derVirtualKeyboard Schnittstelle selbst zu steuern.

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

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

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

Schnittstellen

VirtualKeyboardExperimentell

Bietet Funktionen zum Abrufen von Tastatur-Layoutkarten und zum Umschalten der Erfassung von Tastenanschlägen der physischen Tastatur.

Erweiterungen für andere Schnittstellen

Navigator.virtualKeyboardSchreibgeschütztExperimentell

Gibt eine Referenz auf dieVirtualKeyboard API zurück, um die Kontrolle über die virtuelle Bildschirmtastatur zu übernehmen.

HTMLElement.virtualkeyboardpolicyExperimentell

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-Kompatibilität

Siehe auch

• Volle Kontrolle mit der VirtualKeyboard-API