Lepszy tryb pełnoekranowy dzięki interfejsowi Keyboard Lock API

Użyj interfejsu Keyboard Lock API, aby przechwycić klawisz Escape w trybie pełnoekranowym.

Thomas Steiner

Jeśli zdarzyło Ci się grać w pełnoekranową grę internetową, w której pojawiło się okno dialogowe, które instynktownie zamknąłeś klawiszem Escape, prawdopodobnie gra została wyłączona z trybu pełnoekranowego. Ten problem wynika z tego, że okno i tryb pełnoekranowy „walczą” o klawisz Escape. To nierówna walka, ponieważ domyślnie tryb pełnoekranowy zawsze wygrywa. Jak jednak sprawić, aby okno dialogowe było „zwycięzcą” w przypadku klawisza Escape? W tym przypadku przydatny jest interfejs Keyboard Lock API.

Obsługa przeglądarek

Korzystanie z interfejsu Keyboard Lock API

Interfejs Keyboard Lock API jest dostępny w metodzie navigator.keyboard. lock() interfejsu Keyboard. Zwraca on obietnicę po włączeniu przechwytywania naciśnięć dowolnych lub wszystkich klawiszy na klawiaturze fizycznej. Ta metoda może przechwytywać tylko klucze, do których dostęp przyznaje system operacyjny. Na szczęście klawisz Escape jest jednym z nich.

Jeśli Twoja aplikacja ma tryb pełnoekranowy, użyj interfejsu Keyboard Lock API jako progresywnego ulepszenia, przechwytując klawisz Escape podczas wysyłania żądania pełnego ekranu. Odblokuj (czyli przestań przechwytywać) klawiaturę po wyjściu z trybu pełnoekranowego za pomocą metody unlock() interfejsu 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.');
  });
}

Oznacza to, że gdy użytkownik jest w trybie pełnoekranowym, naciśnięcie klawisza Escape domyślnie anuluje okno. Jeśli użytkownik naciśnie i przytrzyma klawisz Escape, nadal będzie mógł wyjść z trybu pełnoekranowego. Połączenie zalet obu formatów.

Prezentacja

W wersji demonstracyjnej możesz przetestować zarówno domyślną, jak i ulepszoną wersję. Kod źródłowy wersji demonstracyjnej jest mniej przejrzysty niż poprzedni fragment, ponieważ musi pokazywać oba zachowania.

W praktyce

Aby w praktyce zastosować to ulepszenie, skopiuj poprzedni fragment kodu. Został on zaprojektowany tak, aby działać bez konieczności wprowadzania zmian, nawet w przypadku istniejącego kodu pełnoekranowego. Przykładem może być ten artykuł o grze Freeciv. Po scaleniu żądania możesz anulować wszystkie okna w grze, naciskając klawisz Escape.

Dodatkowa skryptozakładka

Nie wszystkie aplikacje i gry obsługujące tryb pełnoekranowy są dostępne na licencji open source lub akceptują Twoje poprawki. Możesz dodać ten bookmarklet do paska zakładek i kliknąć go, aby włączyć lepszy tryb pełnoekranowy.