Vollständige Kontrolle über die VirtualKeyboard API

Thomas Steiner

Geräte wie Tablets oder Mobiltelefone haben in der Regel eine Bildschirmtastatur für die Texteingabe. Im Gegensatz zu einer physischen Tastatur, die immer vorhanden und immer gleich ist, erscheint eine Bildschirmtastatur und verschwindet, abhängig von den Aktionen der Nutzenden, an die es sich auch dynamisch anpassen kann. basierend auf dem inputmode .

Diese Flexibilität geht allerdings mit dem Preis einher, dass die Layout-Engine des Browsers über die Bildschirmtastatur angezeigt und muss möglicherweise das Layout des Dokuments an die kompensieren. So kann z. B. ein Eingabefeld, in das der Nutzer Text eingibt, vom Bildschirmtastatur, sodass der Browser zum Sichtfeld scrollen muss.

Traditionell haben Browser dieses Problem selbst gemeistert, aber komplexere Anwendungen erfordert möglicherweise mehr Kontrolle über das Browserverhalten. Beispiele hierfür sind Multiscreen-Mobilgeräte bei denen der traditionelle Ansatz zu Bildschirmplatzhalter, wenn die Bildschirmtastatur wird nur auf einem Bildschirmsegment angezeigt, aber der verfügbare Darstellungsbereich ist auf beiden Bildschirmen verkleinert. dennoch. Das Bild unten zeigt, wie das Layout mithilfe der VirtualKeyboard API optimiert werden könnte. des Dokuments dynamisch anpassen, um die Anwesenheit der Bildschirmtastatur auszugleichen.

In solchen Situationen kommt die VirtualKeyboard API ins Spiel. Sie besteht aus drei Teilen:

• Die VirtualKeyboard-Schnittstelle für das navigator-Objekt für den programmatischen Zugriff auf das virtuelle über die Tastatur von JavaScript.
• Eine Reihe von CSS-Umgebungsvariablen, die Informationen zur Funktion der Bildschirmtastatur liefern Erscheinungsbild.
• Eine Richtlinie für die Bildschirmtastatur, mit der festgelegt wird, ob die Bildschirmtastatur angezeigt werden soll.

Aktueller Status

Die VirtualKeyboard API ist ab Chromium 94 für Computer und Mobilgeräte verfügbar.

Funktionserkennung und Browserunterstützung

Mit dem folgenden Snippet können Sie feststellen, ob die VirtualKeyboard API im aktuellen Browser unterstützt wird:

if ('virtualKeyboard' in navigator) {
  // The VirtualKeyboard API is supported!
}

VirtualKeyboard API verwenden

Die VirtualKeyboard API fügt dem navigator-Objekt eine neue VirtualKeyboard-Schnittstelle hinzu.

Neue Funktion für die Bildschirmtastatur aktivieren

Um dem Browser mitzuteilen, dass Sie sich selbst um die Verdeckung der Bildschirmtastatur kümmern, müssen Sie Aktivieren Sie zuerst das neue Verhalten der Bildschirmtastatur, indem Sie die boolesche Eigenschaft overlaysContent festlegen. an true.

navigator.virtualKeyboard.overlaysContent = true;

Bildschirmtastatur ein- und ausblenden

Sie können die Bildschirmtastatur programmatisch anzeigen, indem Sie die entsprechende show()-Methode aufrufen. Damit dies funktioniert, Das fokussierte Element muss ein Formularsteuerelement (z. B. ein textarea-Element) oder ein Bearbeitungshost sein (z. B. mit der Methode contenteditable Die Methode gibt immer undefined zurück, löst aber ein geometrychange-Ereignis aus wenn die Bildschirmtastatur zuvor nicht angezeigt wurde.

navigator.virtualKeyboard.show();

Rufen Sie zum Ausblenden der Bildschirmtastatur die Methode hide() auf. Die Methode gibt immer undefined zurück, löst jedoch Ein geometrychange-Ereignis, wenn zuvor die Bildschirmtastatur angezeigt wurde.

navigator.virtualKeyboard.hide();

Aktuelle Geometrie abrufen

Die aktuelle Geometrie der Bildschirmtastatur erhalten Sie in der boundingRect-Eigenschaft. Die aktuellen Abmessungen der Bildschirmtastatur werden als DOMRect-Objekt. Die Nebenstelle entspricht den Eigenschaften oben, rechts, unten und/oder links.

const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
console.log('Virtual keyboard geometry:', x, y, width, height);

Über Geometrieänderungen informiert werden

Immer, wenn die Bildschirmtastatur eingeblendet oder ausgeblendet wird, wird das Ereignis geometrychange ausgelöst. Die Die target-Eigenschaft des Ereignisses enthält das virtualKeyboard-Objekt, das wie oben erläutert die neue Geometrie der Bildschirmtastatur als ein DOMRect

navigator.virtualKeyboard.addEventListener('geometrychange', (event) => {
  const { x, y, width, height } = event.target.boundingRect;
  console.log('Virtual keyboard geometry changed:', x, y, width, height);
});

CSS-Umgebungsvariablen

Die VirtualKeyboard API stellt eine Reihe von CSS-Umgebungsvariablen bereit, die Informationen zu das Aussehen der Bildschirmtastatur. Sie sind ähnlich wie die CSS-Property inset modelliert. also für die Properties „top“, „right“, „bottom“ und/oder „left“.

• keyboard-inset-top
• keyboard-inset-right
• keyboard-inset-bottom
• keyboard-inset-left
• keyboard-inset-width
• keyboard-inset-height

Die Einsätze der Bildschirmtastatur sind sechs Umgebungsvariablen, die ein Rechteck Einsätze unten und links vom Rand des Darstellungsbereichs entfernt. Die Einsätze für Breite und Höhe werden berechnet, der anderen Einsatzbereiche für die Ergonomie der Entwickler. Der Standardwert jeder Tastatureinfügung ist 0px, wenn kein Fallback-Wert angegeben ist.

Normalerweise verwenden Sie die Umgebungsvariablen wie im folgenden Beispiel:

.some-class {
  /**
   * Use a margin that corresponds to the virtual keyboard's height
   * if the virtual keyboard is shown, else use the fallback value of `50px`.
   */
  margin-block-end: env(keyboard-inset-height, 50px);
}

.some-other-class {
  /**
   * Use a margin that corresponds to the virtual keyboard's height
   * if the virtual keyboard is shown, else use the default fallback value of `0px`.
   */
  margin-block-end: env(keyboard-inset-height);
}

Richtlinie zur Bildschirmtastatur

Manchmal sollte die Bildschirmtastatur nicht angezeigt werden, wenn ein bearbeitbares Element im Fokus ist. Ein Beispiel ist ein Tabellenkalkulationsanwendung, bei der Nutzende auf eine Zelle tippen können, damit ihr Wert in eine Formel für in eine andere Zelle ein. virtualkeyboardpolicy ist ein Attribut, dessen Schlüsselwörter die Strings auto und manual Wird es für ein Element angegeben, das ein contenteditable-Host ist, führt auto dazu, dass entsprechende bearbeitbares Element, um die Bildschirmtastatur automatisch anzuzeigen, wenn sie im Fokus oder angetippt und manual entkoppelt den Fokus und das Tippen auf das bearbeitbare Element von Änderungen im virtuellen auf den aktuellen Status der Tastatur.

<!-- Do nothing on regular focus, but show the virtual keyboard on double-click. -->
<div
  contenteditable
  virtualkeyboardpolicy="manual"
  inputmode="text"
  ondblclick="navigator.virtualKeyboard.show();"
>
  Double-click to edit.
</div>

Demo

Sie können die VirtualKeyboard API in Aktion in einem Demo zu Glitch Erkunden Sie auf jeden Fall die Quellcode, um zu sehen, wie er implementiert wird. Während geometrychange-Ereignisse in der iFrame-Einbettung beobachtet werden können, wird über die Bildschirmtastatur erfordert das Öffnen der Demo in einem eigenen Browsertab.

Nützliche Links

• Spezifikation
• Repository
• ChromeStatus-Eintrag
• Chromium-Fehler
• W3C TAG-Überprüfung
• Positionsanfrage für Mozilla-Standards
• Positionsanfrage für WebKit-Standards

Danksagungen

Die VirtualKeyboard API wurde von Anupam Snigdha von Microsoft entwickelt, mit Beiträgen von und dem ehemaligen Herausgeber Grisha Lyukshin, ebenfalls von Microsoft. Hero-Image von @freestocks aktiviert Unsplash (Unsplash).