VirtualKeyboard API

Die VirtualKeyboard API besteht aus drei Teilen:

• Die VirtualKeyboard Schnittstelle, die über navigator.virtualKeyboard zugänglich ist, wird verwendet, um aus dem automatischen Verhalten der virtuellen Tastatur auszusteigen, die virtuelle Tastatur programmgesteuert ein- oder auszublenden sowie die aktuelle Position und Größe der virtuellen Tastatur zu erhalten.
• Die keyboard-inset-* CSS-Umgebungsvariablen liefern Informationen über die Position und Größe der virtuellen Tastatur.
• Das virtualkeyboardpolicy Attribut spezifiziert, ob die virtuelle Tastatur auf contenteditable Elementen erscheinen soll.

Um aus dem automatischen Verhalten der virtuellen Tastatur des Browsers auszusteigen, verwenden Sie navigator.virtualKeyboard.overlaysContent = true. Der Browser wird die Ansicht nicht mehr automatisch verkleinern, um Platz für die virtuelle Tastatur zu schaffen, stattdessen überlagert sie Ihren Inhalt.

Nachdem Sie aus dem Standardverhalten des Browsers ausgestiegen sind, können Sie die aktuelle Geometrie der virtuellen Tastatur mithilfe von navigator.virtualKeyboard.boundingRect ermitteln und das Layout entsprechend mit CSS und JavaScript anpassen. Sie können auch Geometrieänderungen, wie z. B. das Ein- oder Ausblenden der Tastatur, durch das geometrychange-Ereignis erfassen.

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 das geometrychange-Ereignis, um zu erkennen, wann sich die Geometrie der virtuellen Tastatur ändert; er greift dann auf die boundingRect-Eigenschaft zu, um die Größe und Position der virtuellen Tastatur abzufragen:

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

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

Die VirtualKeyboard API stellt auch die folgenden CSS-Umgebungsvariablen zur Verfügung: 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 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 der Ansicht. Die width und height Variablen sind ebenfalls verfügbar, falls erforderlich.

Der folgende Codeausschnitt verwendet die keyboard-inset-height CSS-Variable, um Platz für die virtuelle Tastatur unter der Liste der Nachrichten und dem Eingabefeld in einer chat-ähnlichen Anwendung zu reservieren. Wenn die virtuelle Tastatur ausgeblendet ist, gibt die env()-Funktion 0px zurück und der keyboard Grid-Bereich ist ausgeblendet. Die Nachrichten und Eingabeelemente können die volle Höhe der Ansicht einnehmen. Wenn die virtuelle Tastatur erscheint, erhält der keyboard Grid-Bereich die Höhe der virtuellen Tastatur.

<style>
  body {
    display: grid;
    margin: 0;
    height: 100vh;
    grid-template:
      "messages" 1fr
      "input" auto
      "keyboard" env(keyboard-inset-height, 0px);
  }
</style>
<ul id="messages"></ul>
<input type="text" />
<script>
  if ("virtualKeyboard" in navigator) {
    navigator.virtualKeyboard.overlaysContent = true;
  }
</script>

Standardmäßig lösen Elemente, die das contenteditable 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 stattdessen die virtuelle Tastatur nach einem anderen Ereignis anzuzeigen.

Setzen Sie das virtualkeyboardpolicy Attribut auf manual, um die standardmäßige Handhabung der virtuellen Tastatur im Browser zu verhindern und stattdessen selbst über die show() und hide() Methoden der VirtualKeyboard Schnittstelle zu steuern.

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

<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<script>
  if ("virtualKeyboard" in navigator) {
    navigator.virtualKeyboard.overlaysContent = true;

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

VirtualKeyboard Experimentell

Bietet Funktionen, die Tastaturlayoutkarten abrufen und das Erfassen von Tastendrücken von der physikalischen Tastatur umschalten.

Navigator.virtualKeyboard Nur lesbar Experimentell

Gibt eine Referenz zur VirtualKeyboard API zurück, um die Bildschirmtastatur zu steuern.

HTMLElement.virtualkeyboardpolicy Experimentell

Ein String, der angibt, ob die Standardpolitik des Browsers für das Anzeigen der virtuellen Tastatur verwendet werden soll, wenn das Element fokussiert ist, oder ob das Anzeigen der virtuellen Tastatur manuell gesteuert werden soll.

• Full control with the VirtualKeyboard API