Przechwytywanie klawiszy przy użyciu interfejsu Keyboard Lock API

Zapewniają atrakcyjne wrażenia na pełnym ekranie w różnych przypadkach użycia, takich jak interaktywne strony internetowe, gry czy strumieniowe przesyłanie aplikacji z komputera zdalnego.

Thomas Steiner

Coraz więcej użytkowników spędza większość czasu w przeglądarce, dlatego interaktywne strony internetowe, gry, strumieniowanie z komputera zdalnego i strumieniowanie aplikacji sprawiają, że treści są wciągające i wyświetlają się na pełnym ekranie. W tym celu strony muszą mieć dostęp do specjalnych klawiszy i skrótów klawiszowych w trybie pełnoekranowym, by można ich było używać do nawigacji, menu i gier. Przykładowe klawisze, które mogą być wymagane, to Esc, Alt + Tab, Cmd + ` oraz Ctrl + N.

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

Transmisja z Ubuntu Linux na kartę przeglądarki w Chrome macOS (jeszcze nie działa w trybie pełnoekranowym).
Problem: przesłany pulpit zdalny Ubuntu Linux nie działa w trybie pełnoekranowym i bez aktywnej blokady klawiatury więc klucze systemowe są nadal przechwytywane przez system operacyjny macOS, a obsługa interfejsu nie jest jeszcze atrakcyjna.

Korzystanie z interfejsu Keyboard Lock API

Interfejs Keyboard interfejsu Keyboard API zawiera funkcje, które włączają przechwytywanie naciśnięć klawiszy na klawiaturze fizycznej oraz pobieranie informacji o układzie klawiatury użytkownika.

Warunek wstępny

W nowoczesnych przeglądarkach dostępne są 2 rodzaje pełnego ekranu: odtwarzanie w języku JavaScript za pomocą interfejsu Fullscreen API oraz inicjowanie przez użytkownika za pomocą skrótu klawiszowego. Interfejs Keyboard Lock API jest dostępny tylko wtedy, gdy włączony jest pełny ekran inicjowany za pomocą JavaScriptu. Oto przykład pełnego ekranu inicjowanego przez JavaScript:

await document.documentElement.requestFullscreen();

Wykrywanie cech

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

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

Blokowanie klawiatury

Metoda lock() interfejsu Keyboard zwraca obietnicę po włączeniu przechwytywania naciśnięć klawiszy dotyczących dowolnego lub wszystkich klawiszy na klawiaturze fizycznej. Ta metoda może przechwytywać tylko klucze, do których dostęp przyznaje bazowy system operacyjny. Metoda lock() wymaga do zablokowania tablicy zawierającej co najmniej 1 kod klucza. Jeśli nie podasz kodów, wszystkie klucze będą zablokowane. Lista prawidłowych wartości kodu klucza jest dostępna w specyfikacji wartości kodu Klawiatura zdarzenia w interfejsie (w języku angielskim).

Przechwytuję wszystkie klawisze

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

navigator.keyboard.lock();

Przechwytywanie określonych klawiszy

W tym przykładzie przechwytywane są klawisze W, A, S i D. Przechwytuje te klawisze niezależnie od tego, które modyfikatory zostaną użyte przy naciśnięciu klawisza. Przy założeniu, że w amerykańskim układzie QWERTY rejestracja funkcji "KeyW" powoduje, że klawisze W, Shift + W, Control + W, Control + Shift + W i wszystkie inne kombinacje klawiszy z W są wysyłane do aplikacji. To samo dotyczy usług "KeyA", "KeyS" i "KeyD".

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

Możesz reagować na naciśnięcia klawiszy za pomocą zdarzeń na klawiaturze. 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 synchronicznie.

navigator.keyboard.unlock();

Po zamknięciu dokumentu przeglądarka zawsze wywołuje niejawnie unlock().

Prezentacja

Możesz przetestować Keyboard Lock API, uruchamiając wersję demonstracyjną aplikacji Glitch. Koniecznie zapoznaj się z kodem źródłowym. Kliknięcie przycisku Otwórz pełny ekran spowoduje otwarcie wersji demonstracyjnej w nowym oknie i przejście w tryb pełnego ekranu.

Kwestie związane z bezpieczeństwem

Jedną z wątpliwości tego interfejsu API jest to, że może być używana do przechwytywania wszystkich kluczy i (w połączeniu z Fullscreen API i PointerLock API) uniemożliwia użytkownikowi opuszczenie strony internetowej. Aby temu zapobiec, specyfikacja wymaga, aby przeglądarka umożliwiała użytkownikowi wyjście z blokady klawiatury, nawet jeśli interfejs API żąda wszystkich kluczy. W Chrome jest to długie (dwusekundowe) naciśnięcie klawisza Esc, którego kliknięcie powoduje wyjście z blokady klawiatury.

Podziękowania

Ten artykuł napisali Joe Medley i Kayce Basques. Specyfikację blokady klawiatury napisali Gary Kacmarcik i Jamie Walch. Baner powitalny: Ken Suarez na kanale Unsplash.