W kilku poprzednich wersjach Chrome pojawiły się 2 elementy KeyboardEvent, które są używane jako parametry przekazywane do detektorów zdarzeń keydown, keypress i keyup. Zarówno atrybut code (dodany w Chrome 48), jak i atrybut key (dodany w Chrome 51) zapewniają deweloperom prosty sposób na uzyskanie informacji, które w przeciwnym razie byłyby trudne przy użyciu starszych atrybutów.
Atrybut kodu
Pierwszy z nich to atrybut code. Przyjmuje go ciąg znaków reprezentujący klawisz, który został naciśnięty w celu wygenerowania KeyboardEvent, bez uwzględniania bieżącego układu klawiatury (np. QWERTY i Dvorak), języka (np. angielski lub francuski) ani żadnych klawiszy modyfikujących.
Jest to przydatne, gdy zależy Ci na tym, który klawisz fizyczny został naciśnięty zamiast jakiego znaku. Na przykład podczas pisania gry możesz potrzebować zestawu klawiszy, który będzie przesuwał odtwarzacz w różnych kierunkach. Takie mapowanie powinno być niezależne od układu klawiatury.
Atrybut klucza
Kolejnym istotnym elementem jest nowy atrybut key. Jest on również ustawiony jako ciąg znaków, jednak chociaż code zwraca informacje o naciśniętym klawiszu fizycznym, key zawiera znak wygenerowany przez ten klawisz z uwzględnieniem bieżącego układu klawiatury, ustawień regionalnych i klawiszy modyfikujących.
Sprawdzenie wartości atrybutu key przydaje się, gdy chcesz wiedzieć, jaki znak będzie wyświetlany na ekranie, tak jakby użytkownik wpisał tekst.
Co to oznacza w praktyce?
Aby podać konkretny przykład, załóżmy, że użytkownik korzysta z amerykańskiej klawiatury w układzie QWERTY. Naciśnięcie fizycznego klawisza Q na tej klawiaturze spowoduje wyświetlenie elementu KeyboardEvent z atrybutem code ustawionym na "KeyQ". Dzieje się tak niezależnie od układu klawiatury i innych klawiszy modyfikujących. Dla porównania – na klawiaturze francuskiej (AZERTY) ten klawisz nadal będzie miał code o wartości "KeyQ", mimo że litera na klawiaturze to „a”.
Naciśnięcie fizycznego klawisza Q na tej samej amerykańskiej klawiaturze zwykle powoduje wygenerowanie KeyboardEvent z key ustawionym na "q" (bez klawiszy modyfikujących) lub "Q" (z Shiftem lub CapsLock) lub "œ" (w OS X z klawiszem Alt). Na francuskiej klawiaturze AZERTY ten sam klawisz generuje literę „a” (lub „A” po naciśnięciu klawisza Shift lub CapsLock). W przypadku innych układów klawiatury key może mieć wartość "й", "ض", "ㅂ", "た" lub inny znak.
Jeśli w grze chcesz używać klawiszy WASD do ruchu, użyj atrybutu code i sprawdź, czy "KeyW", "KeyA", "KeyS" i "KeyD" są używane. Będzie to działać w przypadku wszystkich klawiatur i wszystkich układów – nawet klawiatur AZERTY, w których zmieniono położenie klawiszy „W” i „Z”.
Klawiatury wirtualne
Jak można zauważyć, do tej pory koncentrowaliśmy się na działaniu funkcji z wykorzystaniem klawiatury fizycznej. A co z użytkownikami, którzy używają klawiatury wirtualnej lub innego urządzenia wejściowego? Specyfikacja zawiera oficjalne wytyczne dotyczące atrybutu code. Podsumowując, klawiatura wirtualna, która imituje układ klawiatury standardowej, powinna skonfigurować odpowiedni atrybut code, ale w przypadku klawiatur wirtualnych o niekonwencjonalnych układach funkcja code może w ogóle nie zostać ustawiona.
Atrybut key jest łatwiejszy w obsłudze, w którym należy ustawić ciąg znaków zależny od tego, jaki znak wpisał użytkownik (wirtualnie).
Wypróbuj
Gary Kačmarčík przygotował fantastyczną prezentację wszystkich atrybutów związanych z KeyboardEvent:
Obsługa różnych przeglądarek
Obecnie obsługiwany jest atrybut code tylko w Chrome 48 i nowszych, Opera 35 i nowszych oraz Firefox 44 i nowszych.
Atrybut key jest obsługiwany w przeglądarkach Firefox w wersji 44 i nowszych, Chrome 51 i nowszych oraz Opera 38 i nowszych. jest obsługiwana tylko w przeglądarkach Internet Explorer 9 i nowszych oraz Edge 13 i nowszych.