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ę zagrać w pełnoekranową grę internetową, w której pojawiało się okno, które instynktownie anulowano klawiszem Escape, prawdopodobnie nastąpiło wylogowanie z trybu pełnoekranowego. Jest to frustrujące, gdy okno dialogowe i tryb pełnego ekranu „walczą” o klawisz Escape. To nierówna walka, ponieważ domyślnie wygrywa tryb pełnoekranowy. Co jednak zrobić, aby okno po naciśnięciu klawisza Escape było lepsze? W takiej sytuacji do akcji wkracza Klawiatura Lock API.

Obsługiwane przeglądarki

Używanie interfejsu Keyboard Lock API

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

Jeśli aplikacja ma tryb pełnoekranowy, używaj interfejsu Klawiatura Lock API do stopniowego ulepszania. Aby to zrobić, naciśnij klawisz Escape, gdy chcesz włączyć pełny ekran. Odblokuj klawiaturę (czyli nie przechwytuj jej) po wyjściu z trybu pełnoekranowego za pomocą metody unlock() w interfejsie 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 Escape domyślnie anuluje okno. Może wyłączyć tryb pełnoekranowy, jeśli użytkownik naciśnie i przytrzyma klawisz Escape. To, co najlepsze w obu rozwiązaniach.

Pokaz

W wersji demonstracyjnej możesz przetestować zarówno warianty domyślne, jak i stopniowo ulepszone. Kod źródłowy wersji demonstracyjnej jest mniej czysty niż wcześniej, ponieważ musi uwzględniać oba te elementy.

W praktyce

Aby użyć tego progresywnego ulepszenia w praktyce, po prostu skopiuj poprzedni fragment. Działa bez wprowadzania zmian, nawet w przypadku dotychczasowego kodu pełnoekranowego. Przykładem może być PR gry Freeciv. Po połączeniu PR możesz anulować wszystkie okna gry, naciskając Escape.

Bonusowy skryptozakładki

Nie wszystkie aplikacje i gry obsługujące tryb pełnoekranowy są typu open source lub akceptują poprawki. Aby włączyć lepszy tryb pełnoekranowy, można dodać do paska zakładek poniższy bookmarklet.