W ostatnich wersjach Chrome dodano 2 elementy do KeyboardEvent, które są używane jako parametr przekazywany do metod keydown, keypress i keyup. Atrybut code (dodany w Chrome 48) i atrybut key (dodany w Chrome 51) zapewniają deweloperom prosty sposób na uzyskanie informacji, które w innym przypadku byłyby trudne do uzyskania za pomocą starszych atrybutów.
Atrybut kodu
Pierwszy jest atrybut code. Jest to ciąg reprezentujący klawisz, który został naciśnięty w celu wygenerowania KeyboardEvent, bez uwzględniania bieżącego układu klawiatury (np. QWERTY w opozycji do Dvorak), lokalizacji (np. angielski lub francuski) ani żadnych klawiszy modyfikujących.
Jest to przydatne, gdy zależy Ci na tym, który fizyczny klawisz został naciśnięty, a nie na tym, któremu znakowi odpowiada. Jeśli na przykład piszesz grę, możesz chcieć, aby określony zestaw klawiszy służył do poruszania się w różnych kierunkach, a to mapowanie powinno być w najlepszym przypadku niezależne od układu klawiatury.
Kluczowy atrybut
Kolejny jest nowy atrybut key. Jest on również ustawiony na ciąg znaków, ale podczas gdy code zwraca informacje o fizycznym klawiszu, który został naciśnięty, key zawiera znak wygenerowany przez ten klawisz, biorąc pod uwagę bieżący układ klawiatury, lokalizację i klawisze modyfikujące.
Wartość atrybutu key jest przydatna, gdy chcesz wiedzieć, jaki znak wyświetli się na ekranie, tak jakby użytkownik wpisał go w polu tekstowym.
Co to oznacza w praktyce?
Weźmy za przykład użytkownika korzystającego z klawiatury QWERTY w wersji amerykańskiej. Naciśnięcie fizycznego klawisza Q na tej klawiaturze spowoduje utworzenie elementu KeyboardEvent z atrybutem code ustawionym na "KeyQ". Dotyczy to wszystkich układów klawiatury i wszystkich innych klawiszy modyfikujących. Dla porównania, na klawiaturze francuskiej (AZERTY) ten klawisz nadal miałby code "KeyQ", mimo że litera wydrukowana na przycisku to „a”.
Naciśnięcie fizycznego klawisza Q na tej samej klawiaturze w Stanach Zjednoczonych zwykle spowoduje wyświetlenie klawisza KeyboardEvent z ustawieniem key równym "q" (bez klawiszy modyfikujących), "Q" (z Shift lub CapsLock) lub "œ" (w OS X z Alt). Na francuskiej klawiaturze AZERTY ten sam klawisz wygeneruje „a” (lub „A” z Shift lub CapsLock). W przypadku innych układów klawiatury wartość key może być "й", "ض", "ㅂ", "た" lub inny znak.
Wracając do przykładu gry z początku tego artykułu: jeśli chcesz, aby w grze do poruszania używane były klawisze WASD, możesz użyć atrybutu code i sprawdzić, czy występują w nim wartości "KeyW", "KeyA", "KeyS" i "KeyD". Ta funkcja działa na wszystkich klawiaturach i w przypadku wszystkich układów, nawet klawiatur AZERTY, na których klawisze „w” i „z” są zamienione miejscami.
Klawiatury wirtualne
Do tej pory skupialiśmy się na zachowaniu przy założeniu, że używana jest klawiatura fizyczna. A co z użytkownikami, którzy wpisują tekst na klawiaturze wirtualnej lub alternatywnym urządzeniu do wprowadzania danych? Specyfikacja zawiera oficjalne wskazówki dotyczące atrybutu code. Podsumowując, klawiatura wirtualna, która naśladuje układ standardowej klawiatury, powinna mieć ustawiony odpowiedni atrybut code, ale klawiatury wirtualne, które mają niestandardowy układ, mogą nie mieć ustawionego atrybutu code.
W przypadku atrybutu key sytuacja jest prostsza, ponieważ powinien on być ustawiony na ciąg znaków odpowiadający znakom wpisanemu przez użytkownika (wirtualnie).
Wypróbuj
Gary Kačmarčík przygotował fantastyczne demo, które wizualizuje wszystkie atrybuty powiązane z KeyboardEvent:
Obsługa w różnych przeglądarkach
W chwili pisania tego artykułu obsługa atrybutu code jest ograniczona do przeglądarek Chrome 48 i nowszych, Opera 35 i nowszych oraz Firefox 44 i nowszych. Atrybut key jest obsługiwany w przeglądarkach Firefox 44 i nowszych, Chrome 51 i nowszych oraz Opera 38 i nowszych, a w przeglądarkach Internet Explorer 9 i nowszych oraz Edge 13 i nowszych jest obsługiwany częściowo.