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-Dialogfeld eingeblendet wurde, das Sie instinktiv mit der Esc-Taste abgebrochen haben, wurde der Vollbildmodus wahrscheinlich beendet. Diese frustrierende Erfahrung ist darauf zurückzuführen, dass im Dialogfeld und im Vollbildmodus um die Esc-Taste „gekämpft“ wird. Es ist ein ungleicher Kampf, denn standardmäßig sieht der Vollbildmodus immer. Aber wie können Sie diesen Dialog zum Gewinner für die Taste Esc machen? Hier kommt die Keyboard Lock API ins Spiel.
Unterstützte Browser
Keyboard Lock API verwenden
Die Keyboard Lock API ist in navigator.keyboard. verfügbar. 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 das zugrunde liegende Betriebssystem Zugriff gewährt. Glücklicherweise ist die Esc-Taste eine davon.
Wenn Ihre App einen Vollbildmodus hat, verwenden Sie die Keyboard Lock API als progressive Verbesserung. Erfassen Sie dazu beim Anfordern des Vollbildmodus die Esc-Taste. Wenn Sie den Vollbildmodus mit der Methode unlock() der Keyboard-Oberfläche verlassen, müssen Sie die Tastatur entsperren, d. h. nicht mehr erfassen.
// 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 sich der Nutzer im Vollbildmodus befindet, wird das Dialogfeld durch Drücken der Esc-Taste standardmäßig abgebrochen. Auch wenn der Nutzer die Esc-Taste drückt und die Esc-Taste hält, kann er den Vollbildmodus beenden. Das Beste aus beiden Welten.
Demo
Sie können sowohl die Standard- als auch die schrittweise optimierten Varianten in der Demo testen. Der Quellcode der Demo ist weniger sauber als das Snippet zuvor, da er beide Verhaltensweisen zeigen muss.
In der Praxis
Um diese progressive Verbesserung in der Praxis zu verwenden, kopieren Sie einfach das vorherige Snippet. Er funktioniert ohne erforderliche Änderungen selbst bei vorhandenem Vollbildcode. Ein Beispiel findest du in dieser PR für das Spiel Freeciv. Nachdem die PR zusammengeführt wurde, können Sie alle In-Game-Dialogfelder durch Drücken der Esc-Taste abbrechen.
Ein Bonus-Lesezeichenlet
Nicht alle Apps oder Spiele, die den Vollbildmodus unterstützen, sind Open Source oder unterstützen Patches. Sie können das folgende bookmarklet zu Ihrer Lesezeichenleiste hinzufügen und darauf klicken, um einen besseren Vollbildmodus zu aktivieren.