Gebruik de Keyboard Lock API om de Escape-toets op volledig scherm vast te leggen.
Als je ooit een webgame op volledig scherm hebt gespeeld waarbij een in-game dialoog verscheen die je instinctief annuleerde met de Escape- toets, ben je waarschijnlijk uit de modus voor volledig scherm geschopt. Deze frustrerende ervaring wordt veroorzaakt door het feit dat dialoog en volledig schermmodus "vechten" om de Escape- toets. Het is een ongelijke strijd omdat de modus Volledig scherm standaard altijd wint. Maar hoe kun je ervoor zorgen dat de dialoog de winnaar wordt voor de Escape- toets? Dit is waar de Keyboard Lock API in het spel komt.
Browser-ondersteuning
Met behulp van de Keyboard Lock-API
De Keyboard Lock API is beschikbaar op navigator.keyboard. De lock() methode van de Keyboard retourneert een belofte nadat het vastleggen van toetsaanslagen voor een of alle toetsen op het fysieke toetsenbord is ingeschakeld. Deze methode kan alleen sleutels vastleggen waarvoor toegang is verleend door het onderliggende besturingssysteem. Gelukkig is de Escape- toets er één van.
Als uw app een modus voor volledig scherm heeft, gebruik dan de Keyboard Lock API als een progressieve verbetering door de Escape- toets vast te leggen wanneer u om volledig scherm vraagt. Ontgrendel het toetsenbord (dat wil zeggen: niet langer vastleggen) wanneer u de modus Volledig scherm verlaat via de methode unlock() van de Keyboard .
// 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.');
});
}
Dit betekent dat wanneer de gebruiker zich in de modus Volledig scherm bevindt, het drukken op Escape standaard het dialoogvenster annuleert. Als de gebruiker de Escape- toets ingedrukt houdt , kan hij nog steeds de modus Volledig scherm verlaten. Het beste van beide werelden.
Demo
In de demo kunt u zowel de standaardversie als de geleidelijk verbeterde varianten testen. De broncode van de demo is minder schoon dan het bovenstaande fragment, omdat deze beide gedragingen moet vertonen.
In praktijk
Om deze progressieve verbetering in de praktijk te gebruiken, kopieert u gewoon het bovenstaande fragment. Het is ontworpen om zonder vereiste wijzigingen te werken, zelfs met bestaande code op volledig scherm. Zie als voorbeeld deze PR voor het spel Freeciv . Zodra de PR is samengevoegd, kun je alle in-game dialogen annuleren door op Escape te drukken.
Een bonusbookmarklet
Niet alle apps of games die de modus Volledig scherm ondersteunen, zijn open-source of accepteren uw patches. De volgende bookmarklet kan aan uw bladwijzerbalk worden toegevoegd en erop worden geklikt om een betere modus op volledig scherm in te schakelen.