Verwenden Sie die Keyboard Lock API, um die Esc-Taste im Vollbildmodus zu erfassen.
Wenn Sie schon einmal ein Webspiel im Vollbildmodus gespielt haben, bei dem ein In-Game-Dialog eingeblendet wurde, den Sie instinktiv mit der Taste Esc abgebrochen haben, wurden Sie wahrscheinlich aus dem Vollbildmodus gerissen. Das ist dann der Fall, wenn Dialoge und Vollbildmodus die Taste Esc nicht gleichzeitig drücken. Das ist ein ungleiches Kampf, weil standardmäßig der Vollbildmodus immer Vorrang hat. Aber wie können Sie das Dialogfeld zum Gewinner der Esc-Taste machen? Hier kommt die Keyboard Lock API ins Spiel.
Unterstützte Browser
Keyboard Lock API verwenden
Die Keyboard Lock API ist für navigator.keyboard. verfügbar. Die Methode lock() 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. Zum Glück gehört dazu die Esc-Taste.
Wenn Ihre App einen Vollbildmodus hat, können Sie die Keyboard Lock API als schrittweise Optimierung verwenden. Drücken Sie dazu die Esc-Taste, wenn Sie den Vollbildmodus anfordern. Entsperren Sie die Tastatur (d. h., sie wird nicht mehr erfasst), wenn der Vollbildmodus über die Methode unlock() der Keyboard-Oberfläche beendet wird.
// 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.');
});
}
Wenn der Nutzer sich also im Vollbildmodus befindet und die Esc-Taste drückt, wird das Dialogfeld standardmäßig abgebrochen. Wenn der Nutzer die Esc-Taste gedrückt hält, kann er den Vollbildmodus trotzdem beenden. Das Beste aus beiden Welten.
Demo
In der Demo können Sie sowohl die Standardvariante als auch die schrittweise erweiterten Varianten testen. Der Quellcode der Demo ist weniger bereinigt als das obige Snippet, da er beide Verhaltensweisen zeigen muss.
In der Praxis
Wenn Sie diese progressive Verbesserung in der Praxis nutzen möchten, kopieren Sie einfach das Snippet oben. Sie ist so konzipiert, dass keine Änderungen erforderlich sind, selbst bei vorhandenem Vollbildcode. Ein Beispiel findest du in diesem PR für das Spiel Freeciv. Nachdem die PR-Datei zusammengeführt wurde, kannst du alle In-Game-Dialogfelder mit der Esc-Taste abbrechen.
Ein Bonus-Lesezeichen
Nicht alle Apps oder Spiele, die den Vollbildmodus unterstützen, sind Open Source oder akzeptieren Ihre Patches. Sie können das folgende Lesezeichen zur Lesezeichenleiste hinzufügen und darauf klicken, um einen besseren Vollbildmodus zu aktivieren.