Użyj interfejsu Keyboard Lock API, aby przechwycić klawisz Escape w trybie pełnoekranowym.
Jeśli kiedykolwiek grałeś(-aś) w pełnoekranową grę internetową, która instynktownie anulowała je klawiszem Escape, prawdopodobnie nastąpiło to po wyłączeniu trybu pełnoekranowego. To irytujące problemy wynika z tego, że podczas korzystania z klawisza Escape okno i tryb pełnoekranowy „walczą” ze sobą. To nierówna walka, bo domyślnie wygrywa tryb pełnoekranowy. Jak jednak zmienić to okno, aby zwyciężyło w przypadku klawisza Escape? Właśnie tu do akcji wkracza interfejs Keyboard Lock API.
Obsługiwane przeglądarki
Korzystanie z interfejsu Keyboard Lock API
Interfejs Keyboard Lock API jest dostępny w navigator.keyboard.. Metoda lock() interfejsu Keyboard zwraca obietnicę po włączeniu przechwytywania naciśnięć niektórych lub wszystkich klawiszy na klawiaturze fizycznej. Ta metoda może przechwytywać tylko klucze, do których dostęp został przyznany systemowi operacyjnemu. Na szczęście jednym z nich jest klawisz Escape.
Jeśli aplikacja ma tryb pełnoekranowy, korzystaj z interfejsu Keyboard Lock API jako progresywnego ulepszenia, przechwytując klawisz Escape podczas wysyłania żądania pełnego ekranu. Odblokuj klawiaturę po wyjściu z trybu pełnoekranowego (czyli nie przechwytuj jej już) 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. Jeśli użytkownik naciśnie i przytrzyma klawisz Escape, nadal może zamknąć tryb pełnoekranowy. Połączenie zalet obu formatów.
Pokaz
Zarówno domyślne, jak i stopniowo udoskonalane warianty możesz przetestować w wersji demonstracyjnej. Kod źródłowy wersji demonstracyjnej jest mniej oczyszczony niż powyższy fragment kodu, ponieważ musi przedstawiać oba zachowania.
W praktyce
Aby wykorzystać to progresywne ulepszenie w praktyce, skopiuj powyższy fragment kodu. Została zaprojektowana tak, aby działała bez konieczności wprowadzania zmian, nawet w przypadku kodu pełnoekranowego. Przykładem może być ten PR dla gry Freeciv. Aby anulować wszystkie okna dialogowe w grze, naciśnij Escape.
Dodatkowy skryptozakładki
Nie wszystkie aplikacje i gry, które obsługują tryb pełnoekranowy, będą dostępne na licencji open source lub będą akceptować poprawki. Możesz dodać tę bookmarklet do paska zakładek i kliknąć, aby włączyć lepszy tryb pełnoekranowy.