Tasten mit der Keyboard Lock API erfassen

Bieten Sie ein immersives Vollbilderlebnis für eine Vielzahl von Anwendungsfällen, darunter interaktive Websites, Spiele sowie Remote-Desktop- oder Anwendungs-Streaming.

Thomas Steiner

Immer mehr Nutzer verbringen die meiste Zeit im Browser. Deshalb möchten wir mit leistungsstarken interaktiven Websites, Spielen, Remote-Desktop-Streaming und Anwendungs-Streaming ein immersives Vollbilderlebnis bieten. Dazu benötigen Websites im Vollbildmodus Zugriff auf spezielle Tasten und Tastenkombinationen, damit sie für die Navigation, in Menüs oder zum Spielen verwendet werden können. Beispiele für eventuell erforderliche Tasten sind Esc, Alt + Tabulatortaste, Befehlstaste + ` und Strg + N.

Standardmäßig sind diese Schlüssel für die Webanwendung nicht verfügbar, da sie vom Browser oder dem zugrunde liegenden Betriebssystem erfasst werden. Mit der Keyboard Lock API können Websites alle verfügbaren Schlüssel verwenden, die vom Hostbetriebssystem zugelassen sind (siehe Browserkompatibilität).

Ubuntu Linux wird auf einen Browsertab in macOS Chrome gestreamt (wird noch nicht im Vollbildmodus ausgeführt).
Das Problem: Ein gestreamter Ubuntu Linux-Remote-Desktop wird nicht im Vollbildmodus und ohne aktive Tastatursperre ausgeführt, sodass Systemtasten weiterhin vom macOS-Hostbetriebssystem erfasst werden und die Nutzung noch nicht vollständig ist.

Keyboard Lock API verwenden

Die Keyboard-Oberfläche der Keyboard API bietet Funktionen, mit denen du die Erfassung von Tastendrücken über die physische Tastatur aktivieren oder deaktivieren kannst, um Informationen zum Tastaturlayout des Nutzers abzurufen.

Vorbereitung

In modernen Browsern gibt es zwei Arten von Vollbildanzeigen: JavaScript, das über die Fullscreen API initiiert wird, und den Nutzer über eine Tastenkombination. Die Keyboard Lock API ist nur verfügbar, wenn der durch JavaScript initiierte Vollbildmodus aktiv ist. Hier ein Beispiel für einen mit JavaScript initiierten Vollbildmodus:

await document.documentElement.requestFullscreen();

Funktionserkennung

Mit dem folgenden Muster können Sie prüfen, ob die Keyboard Lock API unterstützt wird:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

Tastatur sperren

Die lock()-Methode der Keyboard-Schnittstelle gibt ein Promise zurück, nachdem die Erfassung von Tastendrucken für eine oder alle Tasten auf der physischen Tastatur aktiviert wurde. Mit dieser Methode können nur Schlüssel erfasst werden, denen vom zugrunde liegenden Betriebssystem Zugriff gewährt wird. Für die Methode lock() wird ein Array mit einem oder mehreren Schlüsselcodes benötigt, um sie zu sperren. Wenn keine Schlüsselcodes angegeben werden, werden alle Schlüssel gesperrt. Eine Liste gültiger Schlüsselcodewerte ist in der Spezifikation TastaturEreigniscodewerte für UI-Ereignisse verfügbar.

Alle Schlüssel erfassen

Im folgenden Beispiel werden alle Tastenbetätigungen erfasst.

navigator.keyboard.lock();

Bestimmte Tasten erfassen

Im folgenden Beispiel werden die Schlüssel W, A, S und D erfasst. Diese Tasten werden unabhängig davon erfasst, welche Modifikatoren bei dem Tastendruck verwendet werden. Bei einem US-QWERTY-Layout wird durch das Registrieren von "KeyW" sichergestellt, dass W, Umschalttaste + W, Strg + W, Strg + Umschalttaste + W und alle anderen Modifikatorkombinationen mit W an die App gesendet werden. Dasselbe gilt für "KeyA", "KeyS" und "KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

Sie können auf erfasste Tastendrücke mit Tastaturereignissen reagieren. In diesem Code wird beispielsweise das Ereignis onkeydown verwendet:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Tastatur entsperren

Die Methode unlock() entsperrt alle Schlüssel, die von der Methode lock() erfasst wurden, und wird synchron zurückgegeben.

navigator.keyboard.unlock();

Wenn ein Dokument geschlossen wird, ruft der Browser immer implizit unlock() auf.

Demo

Du kannst die Keyboard Lock API testen, indem du die Demo auf Glitch ausführst. Prüfen Sie unbedingt den Quellcode. Wenn Sie unten auf die Schaltfläche „Vollbildmodus starten“ klicken, wird die Demo in einem neuen Fenster geöffnet.

Sicherheitsaspekte

Ein Problem bei dieser API besteht darin, dass sie verwendet werden könnte, um alle Schlüssel abzurufen und (in Verbindung mit der Fullscreen API und der PointerLock API) zu verhindern, dass der Nutzer die Webseite verlässt. Um dies zu verhindern, muss der Browser dem Nutzer gemäß der Spezifikation eine Möglichkeit bieten, die Tastatursperre zu beenden, selbst wenn alle Tasten von der API angefordert werden. In Chrome ist diese Escape-Taste ein langes Drücken (zwei Sekunden) Esc, um die Tastatursperre zu beenden.

Danksagungen

Dieser Artikel wurde von Joe Medley und Kayce Basques geprüft. Die Spezifikation für die Tastatursperre wurde von Gary Kacmarcik und Jamie Walch verfasst. Hero-Image von Ken Suarez auf Unsplash