Käyttäjä painaa Esc-näppäintä, eikä modaali sulkeudu. Hän painaa Enteriä hakukentässä, eikä mitään tapahdu. Kuulostaako tutulta? Näppäimistön käsittely JavaScriptillä vaikuttaa yksinkertaiselta, kunnes alat käsitellä kolmea tapahtumaa, tusinaa ominaisuutta ja selainerojen viidakkoa.

Jokainen keydown tai keyup tuottaa KeyboardEvent-olion, jossa on parikymmentä kenttää. Osa on ollut vanhentuneita IE-aikakaudelta lähtien, toiset käyttäytyvät eri tavoin Firefoxissa ja Chromessa. Ja MDN:n dokumentaatio on täynnä "älä käytä" -huomautuksia. Kehittäjät eivät tarvitse uutta määrittelyä, vaan toimivan lunttilapun.

Alla on kattava viite näppäimistötapahtumista: KeyboardEvent-olion anatomiasta valmiisiin koodinpätkiin pikanäppäimiä varten. Pidä kooditaulukko kirjanmerkeissä, tulet tarvitsemaan sitä lähes joka toisessa projektissa.

💡 Pikaopas:

• Käytä keydown-tapahtumaa keypress-tapahtuman sijaan: se toimii kaikille näppäimille.
• event.key antaa näppäimen symbolin, event.code palauttaa sen fyysisen koodin.
• event.keyCode ja event.which ovat vanhentuneita, älä käytä niitä uudessa koodissa.
• Alla oleva taulukko kokoaa koodit kaikille vakionäppäimille nykyselaimissa.

Mitä KeyboardEvent sisältää

Kun käyttäjä painaa mitä tahansa näppäintä, selain luo KeyboardEvent-olion, joka on UIEvent-olion jälkeläinen, mikä puolestaan laajentaa perus-Event-oliota. Sen sisällä ovat näppäimen ominaisuudet, muokkausnäppäinten tila ja asettelutiedot.

UI Events -määrittely kehittyy: uusia ominaisuuksia ilmestyy, vanhat merkitään vanhentuneiksi. Viime vuosien suurin muutos on siirtyminen pois numerokoodeista (keyCode / charCode / which) kohti event.key- ja event.code-ominaisuuksia. Kaikki nykyselaimet tukevat tätä paria, ja logiikkasi kannattaa rakentaa niiden varaan.

Selaintuki on lähes täydellinen: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Jos projektisi ei ole jumissa IE11:ssä, voit unohtaa event.which-ominaisuuden.

Kolme tapahtumaa: keydown, keypress ja keyup

Selain erottaa kolme näppäimistötapahtumaa. Laukeamisjärjestys on kiinteä:

• keydown, näppäin painetaan alas (kosketushetki);
• keypress, näppäin pidetään pohjassa ja se tuottaa merkin (vain merkin tuottaville näppäimille);
• keyup, näppäin vapautetaan.

keydown-tapahtuman kuuntelu addEventListener-metodilla:

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

Sisäisille käsittelijöille käytä elementin attribuuttia:

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

Jos tulostat tapahtumaolion konsoliin, näet koko rakenteen kaikkine perittyine kenttineen UIEvent- ja Event-olioista:

Miksi keydown on ensisijainen valinta

keypress on virallisesti tunnustettu vanhentuneeksi. Se laukeaa vain näppäimille, jotka tuottavat merkin arvon, eikä se havaitse muokkausnäppäimiä: ei Alt, ei Ctrl, ei Shift, ei Meta. Et voi käsitellä Ctrl+Z- tai Shift+Tab-yhdistelmiä keypress-tapahtuman kautta.

Ero keydown- ja keyup-tapahtumien välillä: keydown laukeaa ennen kuin selain käsittelee näppäimen; keyup laukeaa sen jälkeen. Tästä seuraa tärkeä asia: event.preventDefault() keydown-tapahtuman sisällä peruuttaa selaimen toiminnon (esimerkiksi merkin syöttämisen kenttään), mutta keyup-tapahtuman sisällä se ei peruuta. Pikanäppäimiin, syötteen validointiin ja peliohjaimiin tarvitset keydown-tapahtuman.

KeyboardEvent-ominaisuustaulukko

Kolme alinta riviä ovat vanhentuneita. Aina kun mahdollista, siirry käyttämään event.key-ominaisuutta. Jos joudut tukemaan vanhaa selainta, tee varakäsittelijä:

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
});

Mutta vuonna 2026 tällainen koodi on vain vanhoja projekteja varten. event.key toimii kaikkialla.

Muokkausnäppäimet ja yhdistelmät

Control-, Shift-, Alt- ja Meta-näppäimet eivät itsessään suorita toimintoja, vaan muuttavat muiden näppäinten käyttäytymistä. Z-näppäimen painaminen antaa kirjaimen "z", kun taas Ctrl+Z suorittaa kumoa-toiminnon.

Tapahtuman totuusarvo-ominaisuudet auttavat muokkausnäppäimen seuraamisessa:

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ähestymistapa pätee kaikkiin yhdistelmiin: Ctrl+S (tallenna), Ctrl+Shift+N (uusi ikkuna), Alt+Tab (vaihda). Tarkistusjärjestys: ensin muokkausnäppäimet totuusarvolippujen kautta, sitten event.key tietylle näppäimelle. Tämä tekee logiikasta luettavaa sen sijaan, että se hukkuisi numerokoodeihin.

Täydellinen näppäinkooditaulukko

Alla on ajantasainen taulukko kaikille vakionäppäimille. Arvot event.key ja event.code on annettu sellaisina kuin nykyselaimet (Chrome, Firefox, Edge, Safari) ne palauttavat.

Navigointi ja toiminnot

Numerorivi (päänäppäimistö)

Kirjaimet A-Z

event.key palauttaa kirjaimille pienaakkosen arvon. event.code ei riipu koosta tai näppäimistöasettelusta: KeyA tarkoittaa fyysistä A-näppäintä, vaikka asettelu olisi venäläinen ja syöte olisi "Ф".

Erikoisnäppäimet

Numeronäppäimistö (Numpad)

Toimintonäppäimet

Järjestelmä ja multimedia

Välimerkit ja symbolit

Tärkeitä huomioita taulukosta

• event.which on vanhentunut ominaisuus, käytä event.key-ominaisuutta.
• event.code on sama pienille (a) ja isoille (A) kirjaimille, se on fyysinen näppäin. event.key palauttaa todellisen merkin huomioiden kirjainkoon.
• Firefoxissa event.which-arvot Equal-, Semicolon- ja Minus-näppäimille poikkeavat Chromesta/Edgestä/Safarista (merkitty taulukkoon). Toinen syy olla käyttämättä event.which-ominaisuutta.
• Chromium-pohjaiset selaimet ja Firefox antavat samat event.key- ja event.code-arvot kaikille listatuille näppäimille.
• Virtuaalinäppäimistöt: UI Events -määrittely vaatii, että virtuaalinäppäimistö (mobiili, ruudulla oleva), joka toistaa vakioasettelua, palauttaa oikean event.code-arvon. Käytännössä mobiiliselaimet (Chrome Android, Safari iOS) käsittelevät keydown/keyup-tapahtumat oikein päänäppäimille, mutta event.code voi olla tyhjä epästandardeille asetteluille.

Interaktiivinen harjoittelutyökalu

Minkä tahansa artikkelin koodin nopeaan tarkistamiseen käytä näppäimistöharjoittelutyökalua: keyevents.netlify.app. Siirrä kohdistin alueelle, paina näppäimiä ja näet event.key-, event.code- ja event.which-arvot sekä muokkausnäppäinten lippujen tilat reaaliajassa. Lähdekoodi on saatavilla GitHubissa.

Video: näppäimistötapahtumat käytännössä

Lyhyt käytännönläheinen purku keydown- ja keyup-tapahtumista, muokkausnäppäinten ja pikanäppäinten käsittelystä elävien esimerkkien kera:

⁉️🤔 Usein kysytyt kysymykset

Mitä eroa on event.key- ja event.code-ominaisuuksilla?

event.key palauttaa merkin arvon huomioiden asettelun ja kirjainkoon: A-näppäimelle se on "a" (tai "A" Shiftin kanssa), venäläiselle asettelulle "ф". event.code palauttaa fyysisen näppäinkoodin, joka on sama kaikille asetteluille: "KeyA". Pikanäppäimille event.code on luotettavampi, se ei riipu syöttökielestä. Tekstinsyöttöön käytä event.key-ominaisuutta.

Miksi keypress-tapahtumaa ei enää käytetä?

W3C-määrittely merkitsi keypress-tapahtuman vanhentuneeksi: se laukeaa vain merkin tuottaville näppäimille eikä havaitse muokkausnäppäimiä. Et voi käsitellä Ctrl+C-, Shift+Tab- ja muita yhdistelmiä keypress-tapahtuman kautta. keydown kattaa kaikki näppäimet ja sitä tuetaan samalla tavalla kaikissa nykyselaimissa.

Voiko event.which- ja event.keyCode-ominaisuuksista luopua kokonaan?

Kyllä, vuonna 2026 voit. event.key on tuettu Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Jos projektisi ei kohdistu IE11:een tai Firefox 28:aan, käytä vain event.key- ja event.code-ominaisuuksia.

Miten pitkä näppäimen painallus käsitellään?

Yhdistä keydown ja keyup. keydown-tapahtumassa käynnistä ajastin tai requestAnimationFrame, keyup-tapahtumassa nollaa se. Pelisyötteelle tämä on vakiomalli: näppäin on pohjassa, hahmo liikkuu, vapautetaan, pysähtyy.

Toimivatko näppäimistötapahtumat mobiililaitteilla?

keydown ja keyup toimivat mobiiliselaimissa, kun käytetään ulkoista Bluetooth-näppäimistöä. Ruudulla oleva näppäimistö tuottaa input-tapahtumia, ei keydown/keyup-tapahtumia kaikille näppäimille, joten mobiilissa tekstikentille on parempi käyttää input-tapahtumaa.

Miten erotat vasemman Shiftin oikeasta?

event.code-ominaisuuden kautta: "ShiftLeft" tai "ShiftRight". event.key palauttaa "Shift" molemmille. Sama pätee Control-, Alt- ja Meta-näppäimille.

Mitä käyttää projektissasi

Jos kirjoitat uutta koodia, ota keydown päätapahtumaksi ja näppäimen tunnistamiseen event.key (symboli) ja event.code (fyysinen näppäin). Tämä yhdistelmä kattaa kaikki skenaariot: pikanäppäimet, navigoinnin, pelisyötteen, lomakkeen validoinnin.

Jos ylläpidät tuotetta, jossa on vanhaa koodia event.which- tai event.keyCode-ominaisuuksilla, suunnittele refaktorointi. Työmäärä on pieni: korvaaminen käsittelijöissä, mutta hyöty on puhdas, ennustettava koodi ilman selainerojen viidakkoa.

Pidä yllä oleva taulukko kirjanmerkeissä. Kun seuraavan kerran tarvitset tietyn näppäimen koodin, avaa se ja kopioi tarvittava event.code-arvo ilman, että joudut muistelemaan numerokoodeja IE6-aikakaudelta.