Utilia
Kategorie ▾
Język: pl ▾

Kody klawiszy JavaScript

Naciśnij dowolny klawisz i zobacz jego wartości event.key, event.code, keyCode, which i location, z modyfikatorami, historią i pełną tabelą kodów.

Kliknij „Zacznij przechwytywać klawisze” albo pole poniżej, a potem naciśnij dowolny klawisz. Kliknij poza polem, aby oddać klawiaturę stronie.

event.key Naciśnij klawisz keyCode – Tab, strzałki i skróty też są tu przechwytywane.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Włączone klawisze Lock
–
Modyfikatory
ctrlKey shiftKey altKey metaKey
Historia klawiszy (najnowsze na górze)
Historia klawiszy (najnowsze na górze)
ZdarzeniekeycodekeyCodelocationModyfikatoryrepeat
Tabela kodów klawiszy (US QWERTY)

Tabela kodów klawiszy (US QWERTY)
keycodekeyCodelocationUwaga

Wartości key dotyczą układu US bez modyfikatorów; inne układy dają inne znaki dla tego samego code. keyCode i which są przestarzałe, ale wciąż szeroko używane.

Jak sprawdzić kod klawisza

  1. Kliknij Zacznij przechwytywać klawisze albo duże pole. Kolorowa ramka pokazuje, że narzędzie nasłuchuje.
  2. Naciśnij dowolny klawisz lub skrót. Duży wyświetlacz pokazuje wartość key i przestarzały keyCode, a karty poniżej – event.key, event.code, event.keyCode, event.which, event.location, event.repeat oraz Włączone klawisze Lock (Caps Lock, Num Lock, AltGraph).
  3. Plakietki Modyfikatory podświetlają się dla ctrlKey, shiftKey, altKey i metaKey.
  4. Skopiuj Fragment JavaScript dla tego klawisza. Opcją Dopasuj po wybierzesz event.key, event.code albo event.keyCode (przestarzałe).
  5. Przewiń Historia klawiszy (najnowsze na górze), aby porównać kilka naciśnięć. Zaznacz Rejestruj też zdarzenia keyup, żeby widzieć także puszczenie klawisza.
  6. Przeglądaj lub filtruj Tabela kodów klawiszy (US QWERTY), gdy potrzebujesz wartości bez naciskania klawisza.

Gdy pole ma fokus, domyślna akcja każdego klawisza jest blokowana, więc Tab, strzałki, Backspace czy Ctrl+S zostają przechwycone, zamiast przenosić fokus albo otwierać okno. Kliknij w dowolnym miejscu poza polem, aby oddać klawiaturę stronie. Kilka skrótów obsługuje system operacyjny, zanim przeglądarka w ogóle je zobaczy (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, często Print Screen) – żadna strona internetowa nie może ich odczytać.

key, code czy keyCode: czego używać?

Obiekt KeyboardEvent zawiera kilka wartości, które odpowiadają na różne pytania:

Właściwość Co mówi Przykład (klawisz A na AZERTY)
key Znak lub nazwany klawisz po uwzględnieniu układu i modyfikatorów "a", "A" z Shift
code Fizyczne położenie klawisza, niezależne od układu "KeyQ"
keyCode / which Przestarzała liczba, zwykle kod ASCII wielkiej litery 65
location 0 standardowy, 1 lewy, 2 prawy, 3 klawiatura numeryczna 0

Używaj key, gdy liczy się znaczenie: Enter wysyła formularz, Escape zamyka okno, „?” otwiera pomoc. Używaj code w grach i skrótach zależnych od położenia klawiszy, np. ruchu WASD, który powinien zostać w tym samym miejscu na francuskiej klawiaturze AZERTY czy niemieckiej QWERTZ. W popularnym polskim układzie programisty litery leżą tak jak w US QWERTY, ale na przykład ą czy ś (z AltGr) dają inne key przy tym samym code. Unikaj keyCode i which w nowym kodzie: są przestarzałe, ich wartości dla znaków interpunkcyjnych różnią się między przeglądarkami (Firefox wysyła 59 dla średnika, Chrome 186) i nie odróżniają lewego od prawego Shift ani dwóch klawiszy Enter. Warto je jednak znać przy utrzymaniu starszego kodu, dlatego narzędzie je pokazuje.

O wygenerowanym fragmencie kodu

Wygenerowany listener dopasowuje dokładnie ten klawisz, który nacisnąłeś, łącznie z Ctrl, Alt i Meta. Dla znaków drukowalnych dopasowywanych po key Shift jest pomijany, bo jest już częścią wartości: Shift+1 daje "!" w układzie US. Gdy naciśniesz sam modyfikator, fragment nie powtarza jego flagi. Pamiętaj, że metaKey to klawisz Cmd na Macu i klawisz Windows na PC, więc skróty wieloplatformowe zwykle sprawdzają event.ctrlKey || event.metaKey.

Najczęściej zadawane pytania

Dlaczego keyCode pokazuje tę samą liczbę dla różnych znaków?

keyCode identyfikuje klawisz, a nie znak. Cyfra 1 i „!” mają wspólne 49, a „a” i „A” – 65. Prawdziwy znak odczytasz z key.

Dlaczego klawisz A na AZERTY jest pokazany jako KeyQ?

code nazywa klawisze według ich położenia na amerykańskiej klawiaturze QWERTY. Klawisz z literą A na francuskiej klawiaturze leży tam, gdzie w US jest Q, więc jego code to KeyQ, a key to „a”. Podobnie w polskim układzie maszynistki (QWERTZ) litera Z ma code KeyY.

Co oznacza „Dead” w event.key?

To klawisz martwy, np. ^ lub ¨ na klawiaturze francuskiej, który czeka na kolejny klawisz, żeby złożyć literę z akcentem. Ostateczny znak przychodzi w następnym zdarzeniu klawisza albo w zdarzeniu input pola tekstowego.

Dlaczego event.repeat pokazuje „tak”?

Przytrzymujesz klawisz, a system operacyjny wysyła automatyczne powtórzenia. Sprawdzaj event.repeat, aby je ignorować, np. gdy skrót ma zadziałać tylko raz.

Czy to, co wpisuję, jest gdzieś zapisywane lub wysyłane?

Nie. Zdarzenia klawiszy są odczytywane przez tę stronę w twojej przeglądarce i nigdzie nie są wysyłane. Historia znika po przeładowaniu lub opuszczeniu strony.

Podobne narzędzia