Tasten mit der Keyboard Lock API erfassen

Bieten Sie eine immersive Vollbildoberfläche für eine Vielzahl von Anwendungsfällen, darunter interaktive Websites, Spiele und Remote-Desktop- oder Anwendungsstreaming.

Thomas Steiner

Immer mehr Nutzer verbringen die meiste Zeit im Browser. Interaktive Websites, Spiele, Remote-Desktop-Streaming und Anwendungsstreaming bieten ein umfassendes Vollbild-Erlebnis. Dazu benötigen Websites Zugriff auf spezielle Tasten und Tastenkombinationen, während sie im Vollbildmodus sind, damit sie für die Navigation, Menüs oder Spiele verwendet werden können. Beispiele für die erforderlichen Tasten sind Esc, Alt + Tab, Cmd + ` und Strg + N.

Standardmäßig sind diese Tasten 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 Tasten verwenden, die vom Hostbetriebssystem zugelassen werden (siehe Browserkompatibilität).

Ubuntu Linux wird in einem Browser-Tab in macOS Chrome gestreamt (noch nicht im Vollbildmodus).
Das Problem: Ein gestreamter Ubuntu Linux-Remote-Desktop wird nicht im Vollbildmodus und ohne aktive Tastatursperre ausgeführt. Systemtasten werden also weiterhin vom macOS-Hostbetriebssystem erfasst und die Nutzung ist noch nicht immersiv.

Keyboard Lock API verwenden

Die Keyboard-Schnittstelle der Keyboard API bietet Funktionen, mit denen die Erfassung von Tastendrücken über die physische Tastatur aktiviert oder deaktiviert werden kann. Außerdem können Informationen zum Tastaturlayout des Nutzers abgerufen werden.

Voraussetzungen

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

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 Methode lock() der Keyboard-Schnittstelle gibt ein Promise zurück, nachdem die Erfassung von Tastendrücken für eine oder alle Tasten auf der physischen Tastatur aktiviert wurde. Mit dieser Methode können nur Schlüssel erfasst werden, für die das zugrunde liegende Betriebssystem Zugriff gewährt. Für die Methode lock() ist ein Array mit einem oder mehreren zu sperrenden Tastencodes erforderlich. Wenn keine Tastencodes angegeben sind, werden alle Tasten gesperrt. Eine Liste der gültigen Tastencode-Werte finden Sie in der Spezifikation UI Events KeyboardEvent code Values.

Alle Tasten erfassen

Im folgenden Beispiel werden alle Tastendrücke erfasst.

navigator.keyboard.lock();

Bestimmte Tasten erfassen

Im folgenden Beispiel werden die Tasten W, A, S und D erfasst. Diese Tasten werden unabhängig davon erfasst, welche Modifizierer mit dem Tastendruck verwendet werden. Bei einem US-QWERTZ-Layout wird durch die Registrierung von "KeyW" sichergestellt, dass W, Umschalttaste + W, Strg + W, Strg + Umschalttaste + W und alle anderen Tastenkombinationen mit W an die App gesendet werden. Das Gleiche gilt für "KeyA", "KeyS" und "KeyD".

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

Sie können mit Tastaturereignissen auf erfasste Tastendrücke reagieren. Im folgenden Code wird beispielsweise das onkeydown-Ereignis 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 gibt synchron zurück.

navigator.keyboard.unlock();

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

Demo

Sie können die Keyboard Lock API testen, indem Sie die Demo auf Glitch ausführen. Sehen Sie sich den Quellcode an. Wenn Sie unten auf die Schaltfläche „Vollbildmodus“ klicken, wird die Demo in einem neuen Fenster gestartet, sodass sie in den Vollbildmodus wechseln kann.

Sicherheitsaspekte

Ein Problem bei dieser API ist, dass sie verwendet werden könnte, um alle Schlüssel abzurufen und (in Verbindung mit der Fullscreen API und der PointerLock API) den Nutzer daran zu hindern, die Webseite zu verlassen. Um dies zu verhindern, muss der Browser gemäß der Spezifikation dem Nutzer eine Möglichkeit bieten, die Tastatursperre zu beenden, auch wenn alle Tasten von der API angefordert werden. In Chrome ist diese Notfalloption ein langes (zwei Sekunden langes) Drücken der Esc-Taste, 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 erstellt. Hero-Image von Ken Suarez auf Unsplash.