Utilia
Kategorie ▾
Jazyk: cs ▾

Kódy kláves v JavaScriptu

Stiskni libovolnou klávesu a zjisti její hodnoty event.key, event.code, keyCode, which a location, včetně modifikátorů, historie a tabulky kódů kláves.

Klikni na „Začít zachytávat klávesy“ nebo na pole níže a stiskni libovolnou klávesu. Kliknutím mimo pole vrátíš klávesnici stránce.

event.key Stiskni klávesu keyCode – Zachytí se tu i Tab, šipky a zkratky.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Zapnuté zámky kláves
–
Modifikátory
ctrlKey shiftKey altKey metaKey
Historie kláves (nejnovější nahoře)
Historie kláves (nejnovější nahoře)
UdálostkeycodekeyCodelocationModifikátoryrepeat
Přehled kódů kláves (US QWERTY)

Přehled kódů kláves (US QWERTY)
keycodekeyCodelocationPoznámka

hodnoty key platí pro rozložení US bez modifikátorů; jiná rozložení dávají pro stejný code jiné znaky. keyCode a which jsou zastaralé, ale stále hojně používané.

Jak zjistit kód klávesy

  1. Klikni na Začít zachytávat klávesy nebo na velké pole. Barevný okraj ukazuje, že nástroj naslouchá.
  2. Stiskni libovolnou klávesu nebo zkratku. Velký displej ukáže hodnotu key a zastaralý keyCode, karty pod ním uvádějí event.key, event.code, event.keyCode, event.which, event.location, event.repeat a Zapnuté zámky kláves (Caps Lock, Num Lock, AltGraph).
  3. Odznaky Modifikátory se rozsvítí pro ctrlKey, shiftKey, altKey a metaKey.
  4. Zkopíruj Úryvek JavaScriptu pro tuto klávesu. V poli Porovnávat podle můžeš zvolit mezi event.key, event.code nebo event.keyCode (zastaralé).
  5. V seznamu Historie kláves (nejnovější nahoře) snadno porovnáš několik stisknutí. Zaškrtni Zaznamenávat i události keyup, chceš-li vidět i uvolnění kláves.
  6. Když potřebuješ hodnotu bez stisknutí klávesy, procházej nebo filtruj tabulku Přehled kódů kláves (US QWERTY).

Dokud má pole fokus, výchozí akce každé klávesy se blokuje, takže se zachytí Tab, šipky, Backspace nebo Ctrl+S místo přesunu fokusu či otevření dialogu. Kliknutím kamkoli mimo pole vrátíš klávesnici stránce. Několik zkratek zpracuje operační systém dřív, než je prohlížeč uvidí (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, často i Print Screen), takže je žádná webová stránka nepřečte.

key, code nebo keyCode: co použít?

Událost KeyboardEvent nese několik hodnot, které odpovídají na různé otázky:

Vlastnost Co říká Příklad (klávesa A na AZERTY)
key Vytvořený znak nebo pojmenovaná klávesa po zohlednění rozložení a modifikátorů "a", s Shiftem "A"
code Fyzická poloha klávesy bez ohledu na rozložení "KeyQ"
keyCode / which Zastaralé číslo, obvykle ASCII kód velkého písmene 65
location 0 standardní, 1 levá, 2 pravá, 3 numerická klávesnice 0

Použij key, když záleží na významu: Enter pro odeslání, Escape pro zavření, „?“ pro otevření nápovědy. Použij code pro hry a zkratky závislé na poloze kláves, například pohyb pomocí WASD, který má zůstat na stejném místě na francouzské klávesnici AZERTY i na německé QWERTZ. V novém kódu se keyCode a which vyhni: jsou zastaralé, jejich hodnoty se u interpunkce mezi prohlížeči liší (Firefox posílá pro středník 59, kdežto Chrome 186) a nerozliší levý a pravý Shift ani dva Entery. Přesto je dobré je znát, když udržuješ starší kód, a proto je tento nástroj zobrazuje.

O úryvku kódu

Vygenerovaný posluchač odpovídá přesně stisknuté klávese, včetně Ctrl, Alt a Meta. U tisknutelných znaků porovnávaných podle key se Shift vynechává, protože je už součástí hodnoty: Shift+1 dává na rozložení US "!". Když stiskneš samotný modifikátor, úryvek jeho příznak neopakuje. Pamatuj, že metaKey je na Macu klávesa Cmd a na PC klávesa Windows, takže mezi platformami přenositelné zkratky obvykle testují event.ctrlKey || event.metaKey.

Časté dotazy

Proč keyCode ukazuje stejné číslo pro různé znaky?

keyCode určuje klávesu, nikoli znak. Číslice 1 a „!“ sdílejí 49, „a“ a „A“ sdílejí 65. Skutečný znak zjistíš z key.

Proč se moje klávesa na AZERTY zobrazuje jako KeyQ?

code pojmenovává klávesy podle jejich polohy na americké klávesnici QWERTY. Klávesa s písmenem A na francouzské klávesnici leží tam, kde je na americké Q, takže její code je KeyQ, zatímco key je „a“.

Co znamená „Dead“ v event.key?

Je to mrtvá klávesa, například ^ nebo ¨ na francouzské klávesnici, která čeká na další klávesu, aby vytvořila písmeno s diakritikou. Výsledný znak doručí následující událost klávesy nebo událost input textového pole.

Proč event.repeat říká ano?

Držíš klávesu stisknutou a operační systém posílá automatická opakování. Pomocí event.repeat je můžeš ignorovat, například aby se zkratka spustila jen jednou.

Zaznamenává se nebo odesílá něco z toho, co píšu?

Ne. Události kláves čte tato stránka ve tvém prohlížeči a nikam se neposílají. Historie zmizí po obnovení nebo opuštění stránky.

Související nástroje