Przechwytywanie klawiszy przy użyciu interfejsu Keyboard Lock API

Zapewniają realistyczne wrażenia na pełnym ekranie w różnych przypadkach, takich jak interaktywne strony internetowe, gry, pulpit zdalny lub strumieniowe przesyłanie aplikacji.

Thomas Steiner

Coraz więcej użytkowników spędza większość czasu w przeglądarce, dlatego warto zadbać o wciągające wrażenia pełnoekranowe. W tym celu witryny muszą mieć dostęp do klawiszy specjalnych i skrótów klawiszowych w trybie pełnoekranowym, aby można ich było używać do nawigacji, menu i grania. Przykładowe klawisze, które mogą być wymagane: Esc, Alt + Tab, Cmd + ` i Ctrl + N.

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

Ubuntu Linux jest przesyłany strumieniowo na kartę przeglądarki w systemie macOS Chrome (jeszcze nie działa w trybie pełnoekranowym).
Problem: pulpit zdalny Ubuntu Linux nie działał w trybie pełnoekranowym i bez aktywnej blokady klawiatury, więc klawisze systemowe są nadal przechwytywane przez system operacyjny hosta macOS, a działanie nie jest jeszcze atrakcyjne.

Korzystanie z interfejsu Keyboard Lock API

Interfejs Keyboard interfejsu Klawiatura API udostępnia funkcje, które pozwalają na przechwytywanie naciśnięć klawiszy na klawiaturze fizycznej oraz o uzyskiwanie informacji o układzie klawiatury użytkownika.

Warunek wstępny

W nowoczesnych przeglądarkach dostępne są dwa typy pełnego ekranu: inicjowane przez JavaScript za pomocą pełnego ekranu API i inicjowane przez użytkownika skrótem klawiszowym. Interfejs Keyboard Lock API jest dostępny tylko wtedy, gdy aktywny jest pełny ekran inicjowany przez JavaScript. Oto przykład pełnego ekranu inicjowanego przez JavaScript:

await document.documentElement.requestFullscreen();

Wykrywanie funkcji

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ęć klawiszy dla dowolnego lub wszystkich klawiszy na klawiaturze fizycznej. Ta metoda może przechwytywać tylko klucze, do których dostęp został przyznany systemowi operacyjnemu. Metoda lock() blokuje tablicę z co najmniej 1 kodem klucza. Jeśli nie podasz kodów, wszystkie klucze zostaną zablokowane. Lista prawidłowych wartości kodu klucza jest dostępna w specyfikacji wartości kodu zdarzenia klawiatury w interfejsie.

Przechwytywanie wszystkich klawiszy

Ten przykład pokazuje wszystkie naciśnięcia klawiszy.

navigator.keyboard.lock();

Przechwytywanie określonych klawiszy

Ten przykład przechwytuje klawisze W, A, S i D. Rejestruje te klawisze niezależnie od tego, jakie modyfikatory są użyte podczas naciśnięcia klawisza. Zakładając amerykański układ QWERTY, zarejestrowanie "KeyW" daje pewność, że W, Shift + W, Control + W, Control + Shift + W i wszystkie inne kombinacje modyfikatorów klawiszy z W są wysyłane do aplikacji. To samo dotyczy "KeyA", "KeyS" i "KeyD".

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

Na zarejestrowane naciśnięcia klawiszy możesz reagować za pomocą zdarzeń na klawiaturze. Na przykład ten kod używa 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 synchronicznie.

navigator.keyboard.unlock();

Gdy dokument jest zamknięty, przeglądarka zawsze domyślnie wywołuje funkcję unlock().

Pokaz

Aby przetestować Klawiatura, uruchom prezentację w Glitchu. Pamiętaj, aby sprawdzić kod źródłowy. Kliknięcie przycisku Wejdź na pełny ekran poniżej powoduje otwarcie wersji demonstracyjnej w nowym oknie, w której można włączyć tryb pełnoekranowy.

Bezpieczeństwo

Ważną zaletą tego interfejsu API jest możliwość użycia go do przechwycenia wszystkich kluczy oraz (w połączeniu z interfejsami Fullscreen API i PointerLock API) uniemożliwienie użytkownikowi opuszczenia strony internetowej. Aby temu zapobiec, specyfikacja wymaga, aby przeglądarka umożliwiała użytkownikowi wyłączenie blokady klawiatury, nawet jeśli interfejs API zażąda wszystkich klawiszy. Aby wyłączyć blokadę klawiatury, naciśnij i przytrzymaj Esc dłużej przez 2 sekundy.

Podziękowania

Ten artykuł napisali Joe Medley i Kayce Basques. Specyfikację blokady klawiatury napisali Gary Kacmarcik i Jamie Walch. Baner powitalny od Kena Suareza w filmie Unsplash.