Betere modus op volledig scherm met de Keyboard Lock API

Gebruik de Keyboard Lock API om de Escape-toets in de volledig schermmodus vast te leggen.

Thomas Steiner

Als je ooit een webgame in volledig scherm hebt gespeeld waarbij een dialoog in de game opdook die je instinctief met de Escape- toets annuleerde, ben je waarschijnlijk uit de volledig schermmodus gegooid. Deze frustrerende ervaring wordt veroorzaakt doordat dialoog en volledig scherm "vechten" om de Escape- toets. Het is een ongelijke strijd, want standaard wint de volledig schermmodus altijd. Maar hoe zorg je ervoor dat de dialoog wint van de Escape -toets? Hier komt de Keyboard Lock API om de hoek kijken.

Browserondersteuning

Gebruik de Keyboard Lock API

De Keyboard Lock API is beschikbaar op navigator.keyboard. De lock() -methode van de Keyboard interface retourneert een belofte na het inschakelen van het vastleggen van toetsaanslagen voor een of alle toetsen op het fysieke toetsenbord. Deze methode kan alleen toetsen vastleggen die toegankelijk zijn voor het onderliggende besturingssysteem. Gelukkig is de Escape- toets daar een van.

Als uw app een volledig scherm heeft, gebruik dan de Keyboard Lock API als een progressieve verbetering door de Escape- toets vast te leggen bij het opvragen van volledig scherm. Ontgrendel (dus niet langer vast te leggen) het toetsenbord bij het verlaten van de volledig schermmodus met de unlock() -methode van de Keyboard interface.

// 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 volledig scherm-modus bevindt, het dialoogvenster standaard wordt geannuleerd door op Escape te drukken. Als de gebruiker de Escape -toets ingedrukt houdt , kan hij de volledig scherm-modus nog steeds verlaten. Het beste van twee werelden.

Demonstratie

Je kunt zowel de standaardvariant als de progressief verbeterde varianten testen in de demo . De broncode van de demo is minder schoon dan het vorige fragment, omdat beide gedragingen zichtbaar moeten zijn.

In de praktijk

Om deze progressieve verbetering in de praktijk te gebruiken, kopieer je gewoon het vorige fragment. Het is ontworpen om te werken zonder dat er wijzigingen nodig zijn, zelfs met bestaande code voor volledig scherm. Zie als voorbeeld deze PR voor de game Freeciv . Zodra de PR is samengevoegd, kun je alle dialogen in de game annuleren door op Escape te drukken.

Een bonus-bookmarklet

Niet alle apps of games die de volledige schermmodus ondersteunen, zijn open source of accepteren uw patches. U kunt de volgende bookmarklet toevoegen aan uw bladwijzerbalk en erop klikken om de volledige schermmodus in te schakelen.