onkeydown
Uruchamia kod JavaScript w chwili naciśnięcia klawisza. Służy do skrótów klawiszowych i obsługi klawiszy takich jak Enter czy Escape.
- Dotyczy
- Elementy, na których może być fokus, oraz
<body>. Zdarzenie wypływa w górę drzewa
Przykład
#<label for="keys">Kliknij w pole i naciśnij dowolny klawisz</label>
<input id="keys" type="text" onkeydown="
document.getElementById('key').textContent = 'key: ' + event.key + ', code: ' + event.code;
">
<p id="key">Jeszcze nic nie naciśnięto.</p>Porównaj literę z Shiftem i bez, strzałki, Escape i polską literę, np. ą. event.key się zmienia, a event.code dla a i ą jest taki sam: KeyA.
Definicja i zastosowanie
#Atrybut onkeydown reaguje na zdarzenie keydown, które zachodzi w chwili naciśnięcia klawisza, jeszcze zanim znak pojawi się w polu. Gdy klawisz jest przytrzymany, zdarzenie się powtarza, a event.repeat ma wtedy wartość true. Puszczenie klawisza to osobne zdarzenie, keyup.
Zdarzenia klawiatury trafiają do elementu, na którym jest fokus: pola formularza, przycisku, linku albo elementu z tabindex lub contenteditable. Zwykły <div> bez fokusu ich nie dostanie. Zdarzenie wypływa w górę drzewa, więc atrybut na <body> obsłuży klawisze naciśnięte w dowolnym miejscu strony.
Który klawisz naciśnięto, powie event.key: znak ("a", "ą", "?") albo nazwa klawisza ("Enter", "Escape", "ArrowUp"). Z kolei event.code podaje fizyczne położenie klawisza niezależnie od układu klawiatury, np. "KeyW" w grze sterowanej klawiszami WASD. Starsza właściwość keyCode i zdarzenie keypress są przestarzałe. W większych projektach dodaj obsługę przez addEventListener("keydown", …).
Składnia
#<element onkeydown="kod JavaScript">…</element>Dostępne w kodzie atrybutu
#event.key
Znak albo nazwa klawisza, zależnie od układu klawiatury i Shiftu:"a","A","Enter","Escape","ArrowUp".event.code
Fizyczny klawisz, niezależnie od układu:"KeyA","Digit1","Space","ArrowUp".event.repeat
true, gdy zdarzenie się powtarza, bo klawisz jest przytrzymany.event.ctrlKey, shiftKey, altKey, metaKey
Czy razem z klawiszem wciśnięto Ctrl, Shift, Alt albo Cmd na Macu (klawisz Windows na PC). Dzięki nim obsłużysz skróty typu Ctrl + S.event.preventDefault()
Blokuje domyślne działanie klawisza, np. wpisanie znaku w pole albo przewinięcie strony strzałką.
Więcej przykładów
#<input id="task" type="text" aria-label="Nowe zadanie"
placeholder="Nowe zadanie, zatwierdź Enterem"
onkeydown="
if (event.key === 'Enter' && this.value.trim() !== '') {
const item = document.createElement('li');
item.textContent = this.value;
document.getElementById('tasks').append(item);
this.value = '';
}
if (event.key === 'Escape') this.value = '';
">
<ul id="tasks"></ul>Enter dodaje zadanie do listy, a Escape czyści pole. Pole nie leży w formularzu, więc Enter niczego nie wysyła.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie blokuj bez potrzeby standardowych klawiszy, takich jak Tab, strzałki czy skróty przeglądarki. Osoby korzystające z klawiatury i czytników ekranu na nich polegają.
- Skróty z samą literą, bez Ctrl czy Alt, łatwo wywołać przypadkiem, a przeszkadzają zwłaszcza osobom sterującym komputerem głosem. Pozwól je wyłączyć albo używaj kombinacji z klawiszem modyfikującym.
Powiązane hasła
#- onclickUruchamia kod JavaScript po kliknięciu elementu. Najprostszy, ale nie najlepszy sposób obsługi zdarzeń.
- oninputUruchamia kod JavaScript przy każdej zmianie wartości pola: po wpisaniu znaku, wklejeniu tekstu albo przesunięciu suwaka.
- accesskeySkrót klawiaturowy, który przenosi fokus do elementu albo od razu go aktywuje.
- tabindexDecyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
- <kbd>Dane wprowadzane przez użytkownika: klawisze, skróty klawiszowe i polecenia do wpisania.
Widzisz błąd albo brakuje przykładu? Napisz do nas.