Przechwytywanie klawiszy przy użyciu interfejsu Keyboard Lock API

Zapewnia immersyjne wrażenia na pełnym ekranie w różnych zastosowaniach, w tym w przypadku interaktywnych stron internetowych, gier oraz strumieniowania pulpitu zdalnego lub aplikacji.

Thomas Steiner

Coraz więcej użytkowników spędza większość czasu w przeglądarce, dlatego interaktywne strony internetowe, gry, strumieniowanie zdalnego pulpitu i strumieniowanie aplikacji starają się zapewnić wciągające wrażenia na pełnym ekranie. Aby to osiągnąć, witryny potrzebują dostępu do specjalnych klawiszy i skrótów klawiszowych w trybie pełnoekranowym, aby można było ich używać do nawigacji, menu lub gier. Przykłady klawiszy, które mogą być wymagane, to Esc, Alt + Tab, Cmd + ` i Ctrl + N.

Domyślnie te klucze nie są dostępne dla aplikacji internetowej, ponieważ są przechwytywane przez przeglądarkę lub system operacyjny. Interfejs Keyboard Lock API umożliwia witrynom korzystanie ze wszystkich dostępnych klawiszy dozwolonych przez system operacyjny hosta (patrz Zgodność z przeglądarkami).

Ubuntu Linux przesyłany strumieniowo na kartę przeglądarki Chrome w systemie macOS (jeszcze nie w trybie pełnoekranowym).
Problem: strumieniowany zdalny pulpit Ubuntu Linux nie działa w trybie pełnoekranowym i nie ma aktywnej blokady klawiatury, dlatego klawisze systemowe są nadal przechwytywane przez system operacyjny macOS, a wrażenia nie są jeszcze w pełni immersyjne.

Korzystanie z interfejsu Keyboard Lock API

KeyboardInterfejs Keyboard API udostępnia funkcje, które włączają i wyłączają rejestrowanie naciśnięć klawiszy na klawiaturze fizycznej, a także pobierają informacje o układzie klawiatury użytkownika.

Warunek wstępny

W nowoczesnych przeglądarkach dostępne są 2 rodzaje trybu pełnoekranowego: uruchamiany przez JavaScript za pomocą interfejsu Fullscreen API i uruchamiany przez użytkownika za pomocą skrótu klawiszowego. Interfejs Keyboard Lock API jest dostępny tylko wtedy, gdy aktywny jest pełny ekran zainicjowany przez JavaScript. Oto przykład przejścia do trybu pełnoekranowego zainicjowanego przez kod JavaScript:

await document.documentElement.requestFullscreen();

Wykrywanie cech

Aby sprawdzić, czy interfejs Keyboard Lock API jest obsługiwany, możesz użyć tego wzorca:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

Blokowanie klawiatury

Metoda lock() interfejsu Keyboard zwraca 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. Metoda lock() przyjmuje tablicę z co najmniej 1 kodem klucza do zablokowania. Jeśli nie podasz kodów kluczy, wszystkie klucze zostaną zablokowane. Lista prawidłowych wartości kodów klawiszy jest dostępna w specyfikacji UI Events KeyboardEvent code Values.

Przechwytywanie wszystkich klawiszy

Poniższy przykład rejestruje wszystkie naciśnięcia klawiszy.

navigator.keyboard.lock();

Przechwytywanie określonych klawiszy

W tym przykładzie rejestrowane są klawisze W, A, S i D. Rejestruje te klawisze niezależnie od tego, które klawisze modyfikujące są używane podczas naciskania klawisza. Przy założeniu, że używasz klawiatury QWERTY w języku angielskim (Stany Zjednoczone), zarejestrowanie "KeyW" zapewnia, że do aplikacji są wysyłane klawisze W, Shift + W, Control + W, Control + Shift + W i wszystkie inne kombinacje klawiszy modyfikujących z klawiszem W. To samo dotyczy klawiszy "KeyA", "KeyS" i "KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

Na przechwycone naciśnięcia klawiszy możesz reagować za pomocą zdarzeń klawiatury. Na przykład ten kod korzysta ze zdarzenia onkeydown:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Odblokowywanie klawiatury

Metoda unlock() odblokowuje wszystkie klucze przechwycone przez metodę lock() i zwraca je synchronicznie.

navigator.keyboard.unlock();

Gdy dokument jest zamykany, przeglądarka zawsze niejawnie wywołuje funkcję unlock().

Prezentacja

Interfejs Keyboard Lock API możesz przetestować, uruchamiając to demo. Sprawdź kod źródłowy. Kliknięcie przycisku Włącz tryb pełnoekranowy poniżej spowoduje uruchomienie wersji demonstracyjnej w nowym oknie, aby można było włączyć tryb pełnoekranowy.

Bezpieczeństwo

Jednym z problemów związanych z tym interfejsem API jest to, że można go używać do przechwytywania wszystkich kluczy i (w połączeniu z interfejsem Fullscreen API i interfejsem PointerLock API) uniemożliwiać użytkownikowi opuszczenie strony internetowej. Aby temu zapobiec, specyfikacja wymaga, aby przeglądarka udostępniała użytkownikowi sposób na wyjście z trybu blokady klawiatury, nawet jeśli interfejs API zażądał wszystkich klawiszy. W Chrome tym wyjściem awaryjnym jest długie (2-sekundowe) naciśnięcie klawisza Esc, które powoduje wyjście z blokady klawiatury.

Podziękowania

Ten artykuł został sprawdzony przez Joego Medleya i Kayce Basques. Specyfikację blokady klawiatury opracowali Gary Kacmarcik i Jamie Walch. Baner powitalny: Ken Suarez, Unsplash.