Tasten mit der Keyboard Lock API erfassen

Bieten Sie eine immersive Vollbilderfahrung für eine Vielzahl von Anwendungsfällen, einschließlich interaktiver Websites, Spiele und Remote Desktop- oder Anwendungsstreaming.

Thomas Steiner

Immer mehr Nutzer verbringen die meiste Zeit im Browser. Ausreichend interaktive Websites, Spiele sowie Remote-Desktop- und Anwendungs-Streaming möchten ein immersives Vollbilderlebnis bieten. Dazu benötigen Websites im Vollbildmodus Zugriff auf spezielle Tasten und Tastenkombinationen, damit sie für die Navigation, Menüs oder Spiele verwendet werden können. Beispiele für erforderliche Tasten sind Esc, Alt + Tabulatortaste, Cmd + ` und Strg + N.

Standardmäßig stehen diese Schlüssel für die Webanwendung nicht zur Verfügung, da sie vom Browser oder vom zugrunde liegenden Betriebssystem erfasst werden. Mit der Keyboard Lock API können Websites alle verfügbaren Schlüssel verwenden, die vom Host-Betriebssystem zugelassen sind. Weitere Informationen zur Browserkompatibilität

<ph type="x-smartling-placeholder">
</ph> Ubuntu Linux wurde auf einen Browsertab in macOS Chrome gestreamt (wird noch nicht im Vollbildmodus ausgeführt). <ph type="x-smartling-placeholder">
</ph> Das Problem: ein gestreamter Ubuntu Linux Remote Desktop, der nicht im Vollbildmodus und ohne aktive Tastatursperre ausgeführt wird, Dadurch werden Systemschlüssel weiterhin vom macOS-Hostbetriebssystem erfasst und die Nutzung ist noch nicht immersive.

Keyboard Lock API verwenden

Die Keyboard-Oberfläche der Keyboard API bietet Funktionen, mit denen Sie die Erfassung von Tastenbetätigungen über die physische Tastatur umschalten sowie Informationen zum Tastaturlayout des Nutzers abrufen können.

Vorbereitung

In modernen Browsern stehen zwei Arten von Vollbildanzeigen zur Verfügung: JavaScript, das über die Fullscreen API ausgelöst wird, und eines, das über ein Tastaturkürzel vom Nutzer initiiert wird. Die Keyboard Lock API ist nur verfügbar, wenn der JavaScript-initiierte Vollbildmodus aktiviert ist. Hier ein Beispiel für einen 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 Methode lock() der Keyboard-Oberfläche gibt ein Promise zurück, nachdem die Erfassung von Tastenbetätigungen für eine oder alle Tasten auf der physischen Tastatur aktiviert wurde. Diese Methode kann nur Schlüssel erfassen, denen vom zugrunde liegenden Betriebssystem Zugriff gewährt wird. Die Methode lock() verwendet ein Array mit einem oder mehreren Schlüsselcodes zum Sperren. Wenn Sie keine Schlüsselcodes angeben, werden alle Schlüssel gesperrt. Eine Liste der gültigen Schlüsselcodewerte finden Sie in der Spezifikation Tastaturereignis-Codewerte für UI-Ereignisse.

Alle Schlüssel erfassen

Im folgenden Beispiel werden alle Tastendrücke erfasst.

navigator.keyboard.lock();

Bestimmte Schlüssel erfassen

Im folgenden Beispiel werden die Schlüssel W, A, S und D erfasst. Diese Tasten werden unabhängig davon erfasst, welche Modifikatoren beim Drücken der Taste verwendet werden. Bei Verwendung eines US-QWERTY-Layouts wird durch die Registrierung von "KeyW" sichergestellt, dass W, Umschalttaste + W, Strg + W, Strg + Umschalt + W sowie alle anderen Tastenkombinationen 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 mit Tastaturereignissen auf erfasste Tasteneingaben 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 entriegeln

Die Methode unlock() entsperrt alle von der Methode lock() erfassten Schlüssel 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. Sehen Sie sich unbedingt den Quellcode an. Wenn Sie unten auf die Schaltfläche „Vollbildmodus aktivieren“ klicken, wird die Demo in einem neuen Fenster gestartet, sodass Sie in den Vollbildmodus wechseln können.

Sicherheitsaspekte

Ein Problem mit 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 Nutzer die Webseite verlassen. 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 können Sie die Tastatursperre durch langes Drücken der Esc-Taste beenden (zwei Sekunden).

Danksagungen

Dieser Artikel wurde von Joe Medley und Kayce Basques gelesen. Die Spezifikation für das Tastaturschloss wurde von Gary Kacmarcik und Jamie Walch verfasst. Hero-Image von Ken Suarez auf Unsplash.