keydown se opakuje při přidržení klávesy, keyup se pošle jednou při uvolnění.
Zapněte, když chcete otestovat Tab, F5 nebo Ctrl+S. Klávesa se pak nepředá prohlížeči. Escape blokování vždy vypne.
Vlastnosti události
event.keyCode a event.which jsou zastaralé — ve specifikaci zůstávají jen kvůli starému kódu. Nový kód pište proti event.key (znak podle rozložení klávesnice) nebo event.code (fyzická pozice klávesy).
Kód pro obsluhu klávesy
Po stisku klávesy se tady objeví hotový posluchač včetně modifikátorů.
Podmínka porovnává event.key. Zakomentovaná varianta s event.code je nezávislá na rozložení klávesnice — na české QWERTZ i na US QWERTY jde o stejnou fyzickou klávesu.
Historie stisků
| Typ | key | code | keyCode | Modifikátory |
|---|
Jak keycode tester použít
- Stiskněte libovolnou klávesu. Hodnoty se vypíšou okamžitě, do žádného pole klikat nemusíte.
- Porovnejte event.key a event.code. První je znak, druhý fyzická pozice klávesy.
- Na Tab nebo F5 zapněte blokování výchozího chování. Vypnete ho klávesou Escape.
- Zkopírujte si vygenerovaný posluchač a vložte ho do svého kódu.
Rozdíl mezi event.key a event.code
event.key je znak, který klávesa vyprodukovala. Závisí na rozložení klávesnice i na modifikátorech, takže stejná klávesa vrátí jednou „a“ a podruhé „A“. U kláves bez znaku dostanete pojmenování, třeba „Enter“ nebo „ArrowLeft“.
event.code popisuje fyzickou pozici klávesy a na rozložení nezávisí. Klávesa vlevo nahoře v písmenné řadě je vždycky KeyQ, i když na české klávesnici píše Q a na francouzské A. Pro herní ovládání a klávesové zkratky vázané na pozici je tedy správnou volbou code, zatímco pro text potřebujete key.
Proč je event.keyCode zastaralý
keyCode i which jsou ve specifikaci UI Events označené jako deprecated. Prohlížeče je stále posílají kvůli zpětné kompatibilitě, ale jejich hodnoty nikdy nebyly pořádně standardizované a mezi prohlížeči se lišily. Nový kód by je používat neměl.
Nejznámější hodnoty přesto potkáte ve starším kódu: 13 pro Enter, 27 pro Escape, 32 pro mezerník, 9 pro Tab. Nástroj je vypisuje právě proto, abyste starý kód dokázali přečíst a přepsat na key nebo code.
keyCode ale není ASCII kód. Je to virtuální kód klávesy, který se u písmen s ASCII shodou náhodou překrývá, ale u funkčních kláves a šipek dává úplně jiná čísla. Skutečné znakové kódy najdete v ASCII tabulce.
Odchycení stisku klávesy v JavaScriptu
Události jsou tři. keydown se spustí při stisknutí a u držené klávesy se opakuje. keyup přijde při uvolnění a neopakuje se. keypress je zastaralá a v novém kódu nemá co dělat.
Vlastnost location rozlišuje duplicitní klávesy. Hodnota 0 je standardní pozice, 1 levý modifikátor, 2 pravý a 3 numerická klávesnice. Díky tomu poznáte levý Shift od pravého, i když obě klávesy vracejí stejný key.
Časté otázky
Jaký keycode má Enter?
Enter má keyCode 13. V moderním kódu ho ale nekontrolujte číslem, ale porovnáním event.key === „Enter“. Numerický Enter vrací stejný key, liší se hodnotou location, která je 3.
Proč mi mezerník vrací mezeru místo názvu?
Protože event.key u mezerníku je skutečně znak mezery, tedy “ „. Nástroj ho v přehledu popisuje jako Space, aby byl vidět, ale ve vygenerovaném kódu najdete správné porovnání s mezerou. Porovnání s „Space“ proto vždycky vyjde false.
Jak zjistím, jestli byl při stisku držený Ctrl nebo Shift?
Událost nese čtyři boolean vlastnosti: ctrlKey, shiftKey, altKey a metaKey. Poslední je Cmd na Macu a klávesa Windows jinde. Nástroj je vypisuje u každého stisku, takže si rovnou ověříte, jak se vaše zkratka chová.
Proč se mi po stisku F5 stránka načte znovu?
Bez zapnutého blokování si výchozí chování vezme prohlížeč. Zapněte přepínač a klikněte mimo ovládací prvky nástroje, pak se F5, Tab i Ctrl+S zachytí a stránka zůstane. Některé zkratky si operační systém a prohlížeč nechávají pro sebe a odchytit je nejde vůbec.