Narzędzie informacji o klawiaturze

Narzędzie Keycode Info — Interaktywny podgląd zdarzeń klawiatury w JavaScript

Narzędzie Keycode Info to darmowy tester zdarzeń klawiatury online stworzony z myślą o programistach JavaScript, twórcach stron internetowych oraz projektantach interfejsów użytkownika. Pozwala na natychmiastowe odczytanie wartości właściwości generowanych przez przeglądarkę podczas wciskania dowolnego klawisza na klawiaturze, ułatwiając implementację skrótów klawiszowych, sterowania w grach przeglądarkowych oraz walidacji formularzy.

Zrozumienie zdarzeń klawiatury w przeglądarkach internetowych

W języku JavaScript obsługa klawiatury opiera się na trzech głównych zdarzeniach: keydown, keypress oraz keyup. Zdarzenie keydown jest wywoływane w momencie wciśnięcia klawisza, keypress (obecnie przestarzałe) dotyczyło generowania znaku tekstowego, natomiast keyup następuje w chwili zwolnienia nacisku na klawisz. Każde z tych zdarzeń tworzy obiekt typu KeyboardEvent, który zawiera szczegółowe właściwości na temat wciśniętego przycisku. Nasz interaktywny tester pozwala w locie zaobserwować te zdarzenia i odczytać ich dokładne parametry bez potrzeby pisania kodu testowego i zaglądania do konsoli deweloperskiej przeglądarki.

Korzystanie z narzędzia jest banalnie proste. Wystarczy kliknąć w obszar aktywny strony i nacisnąć dowolny klawisz lub kombinację klawiszy na klawiaturze. Narzędzie natychmiast zaprezentuje wartości najważniejszych pól obiektu zdarzenia, takich jak key, code, keyCode, which, a także stany klawiszy modyfikatorów, do których należą Shift, Control, Alt oraz klawisz Meta (Windows / Command na macOS).

Różnice pomiędzy event.key, event.code a przestarzałym event.keyCode

W przeszłości deweloperzy powszechnie używali właściwości event.keyCode (lub event.which) do identyfikacji klawiszy. Właściwość ta zwracała numeryczny kod klawisza (np. 13 dla klawisza Enter, 27 dla Escape). Rozwiązanie to miało jednak poważną wadę – kody te różniły się w zależności od przeglądarki oraz układu klawiatury użytkownika. Z tego powodu organizacja W3C uznała te właściwości za przestarzałe (deprecated) i zaleca stosowanie nowoczesnych odpowiedników: event.key oraz event.code.

Właściwość event.key zwraca faktyczną wartość znaku wygenerowanego przez naciśnięcie klawisza, uwzględniając stan klawisza Shift oraz układ klawiatury (np. naciśnięcie klawisza "a" zwróci "a", a z wciśniętym Shiftem zwróci "A"). Z kolei event.code reprezentuje fizyczny klawisz na klawiaturze, niezależnie od układu językowego czy stanu modyfikatorów (np. fizyczny klawisz "Q" w układzie QWERTY zawsze zwróci "KeyQ", nawet jeśli w układzie AZERTY odpowiada on innej literze). Nasz kalkulator Keycode prezentuje obie te wartości jednocześnie, co pozwala zrozumieć różnice w ich zachowaniu i wybrać odpowiednie rozwiązanie do swojego projektu.

Zastosowanie wykrywania klawiszy w nowoczesnym web developmencie

Precyzyjna obsługa klawiatury jest niezbędna przy tworzeniu nowoczesnych i dostępnych (accessibility - WCAG) aplikacji webowych. Skróty klawiszowe pozwalają zaawansowanym użytkownikom na szybszą nawigację po systemach CRM czy edytorach tekstu online. Wykrywanie klawiszy strzałek lub popularnego układu WSAD jest z kolei fundamentem programowania gier HTML5. Nasz tester ułatwia szybkie zmapowanie tych klawiszy i przyspiesza proces pisania kodu.

Najczęściej zadawane pytania