Kasutaja vajutab Escape’i ja modaalaken ei sulgu. Ta vajutab otsinguväljal Enterit ja midagi ei juhtu. Tuttav olukord? Klaviatuurikäsitlus JavaScriptis tundub lihtne, kuni hakkad tegelema kolme sündmuse, tosina omaduse ja brauserierinevuste loomaaiaga.

Iga keydown või keyup tekitab KeyboardEvent objekti, millel on paarkümmend välja. Mõned on olnud aegunud juba IE ajastust, teised käituvad Firefoxis ja Chrome’is erinevalt. Ja MDN dokumentatsioon on täis „ära kasuta" märkusi. Arendajad ei vaja järjekordset spetsifikatsiooni, nad vajavad toimivat spikrilehte.

Allpool on täielik klaviatuurisündmuste teatmik: alates KeyboardEvent anatoomiast kuni valmis näidisteni kiirklahvide jaoks. Jäta kooditabel järjehoidjatesse, sul läheb seda vaja igas teises projektis.

💡 Kiirülevaade:

• Kasuta keypress asemel keydown: see töötab kõigi klahvidega.
• event.key annab klahvi sümboli, event.code tagastab selle füüsilise koodi.
• event.keyCode ja event.which on aegunud, ära kasuta neid uues koodis.
• Allolev tabel koondab kõigi standardsete klahvide koodid tänapäevastes brauserites.

Mis on KeyboardEvent sees

Kui kasutaja vajutab suvalist klahvi, loob brauser KeyboardEvent objekti, mis on UIEvent järglane, mis omakorda laiendab baas Event klassi. Sees on klahvi omadused, modifikaatorite olek, paigutuse teave.

UI Events spetsifikatsioon areneb edasi: uued omadused ilmuvad, vanad muutuvad aegunuks. Peamine muutus viimastel aastatel on eemaldumine numbrilistest koodidest (keyCode / charCode / which) event.key ja event.code kasuks. Kõik tänapäevased brauserid toetavad seda paari ja sa peaksid oma loogika neile üles ehitama.

Brauseritugi on peaaegu täielik: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Kui su projekt ei ole kinni IE11-s, võid event.which unustada.

Kolm sündmust: keydown, keypress ja keyup

Brauser eristab kolme klaviatuurisündmust. Käivitumise järjekord on fikseeritud:

• keydown, klahv vajutatakse alla (kontakti hetk);
• keypress, klahvi hoitakse all ja see genereerib märgi (ainult märgiklahvide puhul);
• keyup, klahv vabastatakse.

keydown tellimine addEventListener kaudu:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

Sisemiste töötlejate jaoks kasuta elemendi atribuuti:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Kui väljastad sündmuse objekti konsooli, näed täielikku struktuuri koos kõigi päritud väljadega UIEvent ja Event klassidest:

Miks keydown on peamine valik

keypress on ametlikult tunnistatud aegunuks. See käivitub ainult klahvide puhul, mis toodavad märgiväärtuse, ega taba modifikaatoreid: ei Alt, ei Ctrl, ei Shift, ei Meta. Sa ei saa keypress kaudu käsitleda Ctrl+Z või Shift+Tab.

Erinevus keydown ja keyup vahel: keydown käivitub enne, kui brauser klahvi töötleb; keyup käivitub pärast. Sellest tuleneb oluline tagajärg: event.preventDefault() keydown sees tühistab brauseri tegevuse (näiteks märgi sisestamise väljale), kuid keyup sees mitte. Kiirklahvide, sisendi valideerimise ja mängujuhtimise jaoks on vaja keydown.

KeyboardEvent omaduste tabel

Kolm alumist rida on aegunud. Kus vähegi võimalik, mine üle event.key-le. Kui pead toetama vana brauserit, tee varuvariant:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Kuid aastal 2026 on selline kood ainult pärandprojektide jaoks. event.key töötab kõikjal.

Modifikaatoriklahvid ja kombinatsioonid

Control, Shift, Alt ja Meta klahvid ei tee ise toiminguid, vaid muudavad teiste klahvide käitumist. Z vajutamine annab tähe „z", samas kui Ctrl+Z teeb undo.

Sündmuse tõeväärtusomadused aitavad modifikaatorit jälgida:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

Sama lähenemine kehtib kõigi kombinatsioonide puhul: Ctrl+S (salvesta), Ctrl+Shift+N (uus aken), Alt+Tab (vaheta). Kontrolli järjekorda: kõigepealt modifikaatorid tõeväärtuslippude kaudu, seejärel event.key konkreetse klahvi jaoks. See muudab loogika loetavaks, selle asemel et uppuda numbrilistesse koodidesse.

Täielik klahvikoodide tabel

Allpool on kehtiv tabel kõigi standardsete klahvide jaoks. Väärtused event.key ja event.code on antud nii, nagu tänapäevased brauserid (Chrome, Firefox, Edge, Safari) need tagastavad.

Navigeerimine ja toimingud

Numbarida (põhiklaviatuur)

Tähed A-Z

event.key tagastab tähtede puhul väiketähe väärtuse. event.code ei sõltu tõstust ega paigutusest: KeyA tähendab füüsilist A-klahvi, isegi kui paigutus on vene ja sisend on „Ф".

Erikohvid

Numbriklaviatuur (Numpad)

Funktsiooniklahvid

Süsteem ja multimeedia

Kirjavahemärgid ja sümbolid

Olulised tabeli märkused

• event.which on aegunud omadus, kasuta event.key.
• event.code on väike- (a) ja suurtähtede (A) puhul identne, see on füüsiline klahv. event.key tagastab tegeliku märgi, arvestades tõstuga.
• Firefoxis erinevad Equal, Semicolon ja Minus klahvide event.which väärtused Chrome/Edge/Safari omadest (tabelis märgitud). Veel üks põhjus, miks event.which mitte kasutada.
• Chromium-põhised brauserid ja Firefox annavad kõigi loetletud klahvide puhul identsed event.key ja event.code väärtused.
• Virtuaalsed klaviatuurid: UI Events spetsifikatsioon nõuab, et standardset paigutust kordav virtuaalne klaviatuur (mobiil, ekraanil) tagastaks korrektse event.code. Praktikas käsitlevad mobiilibrauserid (Chrome Android, Safari iOS) põhiklahvide keydown/keyup õigesti, kuid event.code võib mittestandardsete paigutuste puhul olla tühi.

Interaktiivne treener

Artikli mis tahes koodi kiireks kontrollimiseks kasuta klaviatuuritreenerit: keyevents.netlify.app. Liiguta kursor alale, vajuta klahve ja näed reaalajas event.key, event.code ja event.which väärtusi, samuti modifikaatorilippude olekuid. Lähtekood on saadaval GitHubis.

Video: klaviatuurisündmused praktikas

Lühike praktiline ülevaade keydown ja keyup sündmustest, modifikaatorite ja kiirklahvidega töötamisest koos elavate näidetega:

⁉️🤔 Korduma kippuvad küsimused

Mis vahe on event.key ja event.code vahel?

event.key tagastab märgiväärtuse, arvestades paigutust ja tõstuga: A-klahvi puhul on see "a" (või "A" koos Shiftiga), vene paigutuse puhul "ф". event.code tagastab füüsilise klahvikoodi, mis on kõigi paigutuste jaoks identne: "KeyA". Kiirklahvide jaoks on event.code usaldusväärsem, see ei sõltu sisendkeelest. Tekstisisendi jaoks kasuta event.key.

Miks keypress enam ei kasutata?

W3C spetsifikatsioon märkis keypress aegunuks: see käivitub ainult märgiklahvide puhul ega taba modifikaatoreid. Sa ei saa keypress kaudu käsitleda Ctrl+C, Shift+Tab ja teisi kombinatsioone. keydown katab kõik klahvid ja on kõigis tänapäevastes brauserites identselt toetatud.

Kas event.which ja event.keyCode saab täielikult hüljata?

Jah, aastal 2026 saab. event.key on toetatud Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Kui su projekt ei sihi IE11 või Firefox 28, kasuta ainult event.key ja event.code.

Kuidas käsitleda pikka klahvivajutust?

Kombineeri keydown ja keyup. keydown puhul käivita taimer või requestAnimationFrame, keyup puhul lähtesta see. Mängusisendi jaoks on see standardmuster: klahv all, tegelane liigub, vabastatud, peatub.

Kas klaviatuurisündmused töötavad mobiilseadmetes?

keydown ja keyup töötavad mobiilibrauserites välise Bluetooth-klaviatuuri kasutamisel. Ekraaniklaviatuur genereerib input sündmusi, mitte keydown/keyup kõigi klahvide jaoks, seega on mobiilis tekstiväljade puhul parem kasutada input sündmust.

Kuidas eristada vasakut Shifti paremast?

event.code kaudu: "ShiftLeft" või "ShiftRight". event.key tagastab mõlema puhul "Shift". Sama kehtib Control, Alt ja Meta kohta.

Mida oma projektis kasutada

Kui kirjutad uut koodi, võta põhisündmuseks keydown ning klahvi tuvastamiseks event.key (sümbol) ja event.code (füüsiline klahv). See kombinatsioon katab kõik stsenaariumid: kiirklahvid, navigeerimine, mängusisend, vormi valideerimine.

Kui hooldad toodet, millel on pärandkood event.which või event.keyCode põhjal, planeeri ümberkujundamine. Töö maht on väike: asendamine töötlejates, kuid kasu on puhas, ennustatav kood ilma brauserierinevuste loomaaiata.

Hoia ülaltoodud tabel järjehoidjates. Kui järgmine kord vajad konkreetse klahvi koodi, ava see ja kopeeri vajalik event.code väärtus, ilma et peaksid meenutama numbrilisi koode IE6 ajastust.