Verbesserter Vollbildmodus mit der Keyboard Lock API

Verwenden Sie die Keyboard Lock API, um die Esc-Taste im Vollbildmodus zu erfassen.

Thomas Steiner

Wenn Sie schon einmal ein Vollbild-Webspiel gespielt haben, in dem ein In-Game-Dialogfeld eingeblendet wurde, das Sie instinktiv mit der Esc-Taste geschlossen haben, wurden Sie wahrscheinlich aus dem Vollbildmodus geworfen. Diese frustrierende Situation entsteht, weil sich Dialog- und Vollbildmodus um die Esc-Taste „streiten“. Das ist ein ungleicher Kampf, weil der Vollbildmodus standardmäßig immer gewinnt. Wie können Sie aber dafür sorgen, dass das Dialogfeld durch Drücken der Esc-Taste geschlossen wird? Hier kommt die Keyboard Lock API ins Spiel.

Unterstützte Browser

Keyboard Lock API verwenden

Die Keyboard Lock API ist auf navigator.keyboard. verfügbar. Die Methode lock() der Schnittstelle Keyboard 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, auf die das zugrunde liegende Betriebssystem Zugriff gewährt. Glücklicherweise gehört die Esc-Taste dazu.

Wenn Ihre App einen Vollbildmodus hat, verwenden Sie die Keyboard Lock API als progressive Erweiterung, indem Sie die Escape-Taste erfassen, wenn Sie den Vollbildmodus anfordern. Entsperren Sie die Tastatur (d. h. erfassen Sie sie nicht mehr), wenn Sie den Vollbildmodus über die Methode unlock() der Keyboard-Schnittstelle verlassen.

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

Das bedeutet, dass der Dialog standardmäßig abgebrochen wird, wenn der Nutzer im Vollbildmodus die Esc-Taste drückt. Wenn der Nutzer die Esc-Taste gedrückt hält, kann er den Vollbildmodus trotzdem beenden. Das Beste aus beiden Welten.

Demo

Sie können sowohl die Standard- als auch die progressiv optimierten Varianten in der Demo testen. Der Quellcode der Demo ist weniger übersichtlich als das Snippet oben, da er beide Verhaltensweisen zeigen muss.

In der Praxis

Um diese progressive Verbesserung in der Praxis zu nutzen, kopieren Sie einfach das vorherige Snippet. Es ist so konzipiert, dass es ohne erforderliche Änderungen funktioniert, auch mit vorhandenem Vollbildcode. Ein Beispiel finden Sie in diesem PR für das Spiel Freeciv. Sobald der Pull-Request zusammengeführt wurde, können Sie alle In-Game-Dialogfelder durch Drücken der Esc-Taste schließen.

Ein Bonus-Bookmarklet

Nicht alle Apps oder Spiele, die den Vollbildmodus unterstützen, sind Open Source oder akzeptieren Ihre Patches. Das folgende Bookmarklet kann der Lesezeichenleiste hinzugefügt und angeklickt werden, um einen besseren Vollbildmodus zu aktivieren.