Utilia
Kategoriat ▾
Kieli: fi ▾

Näppäinkoodin selvittäjä

Paina mitä tahansa näppäintä ja näe sen JavaScript-arvot event.key, event.code, keyCode ja which muokkausnäppäimineen, historian ja koko kooditaulukon.

Paina ”Aloita näppäinten kaappaus” tai napsauta alla olevaa ruutua ja paina sitten mitä tahansa näppäintä. Napsauta ruudun ulkopuolelle, niin näppäimistö palaa sivun käyttöön.

event.key Paina näppäintä keyCode – Myös sarkain, nuolet ja pikanäppäimet kaapataan tässä.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Lukitusnäppäimet päällä
–
Muokkausnäppäimet
ctrlKey shiftKey altKey metaKey
Näppäinhistoria (uusin ensin)
Näppäinhistoria (uusin ensin)
TapahtumakeycodekeyCodelocationMuokkausnäppäimetrepeat
Näppäinkoodien taulukko (US QWERTY)

Näppäinkoodien taulukko (US QWERTY)
keycodekeyCodelocationHuomautus

key-arvot ovat US-asettelulle ilman muokkausnäppäimiä; muut asettelut tuottavat samalle koodille muita merkkejä. keyCode ja which ovat vanhentuneita mutta edelleen laajalti käytössä.

Näin selvität näppäimen koodin

  1. Paina Aloita näppäinten kaappaus tai napsauta isoa ruutua. Värillinen reunus kertoo, että kuuntelu on päällä.
  2. Paina mitä tahansa näppäintä tai pikanäppäintä. Iso näyttö kertoo key-arvon ja vanhan keyCode-arvon, ja alla olevat kortit listaavat event.key, event.code, event.keyCode, event.which, event.location, event.repeat sekä Lukitusnäppäimet päällä (Caps Lock, Num Lock, AltGraph).
  3. Muokkausnäppäimet-merkit syttyvät kentille ctrlKey, shiftKey, altKey ja metaKey.
  4. Kopioi JavaScript-koodinpätkä tälle näppäimelle. Kohdassa Vertailuperuste valitset event.key, event.code tai event.keyCode (vanha).
  5. Selaa kohtaa Näppäinhistoria (uusin ensin) vertaillaksesi useita painalluksia. Valitse Kirjaa myös keyup-tapahtumat, jos haluat nähdä myös näppäimen vapautukset.
  6. Selaa tai suodata Näppäinkoodien taulukkoa (US QWERTY), kun tarvitset arvon painamatta näppäintä.

Kun ruudulla on kohdistus, jokaisen näppäimen oletustoiminto estetään. Siksi sarkain, nuolinäppäimet, askelpalautin tai Ctrl+S kaapataan sen sijaan, että ne siirtäisivät kohdistusta tai avaisivat ikkunan. Napsauta ruudun ulkopuolelle, niin näppäimistö palaa sivun käyttöön. Käyttöjärjestelmä käsittelee muutamat pikanäppäimet ennen kuin selain näkee ne (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab ja usein Print Screen), joten mikään verkkosivu ei voi lukea niitä.

key, code vai keyCode: mitä kannattaa käyttää?

KeyboardEvent sisältää useita arvoja, jotka vastaavat eri kysymyksiin:

Ominaisuus Mitä se kertoo Esimerkki (A-näppäin AZERTY-näppäimistöllä)
key Tuotettu merkki tai nimetty näppäin asettelun ja muokkausnäppäinten jälkeen "a", "A" Shiftillä
code Näppäimen fyysinen paikka asettelusta riippumatta "KeyQ"
keyCode / which Vanha numero, yleensä kirjaimen ASCII-koodi isoilla kirjaimilla 65
location 0 tavallinen, 1 vasen, 2 oikea, 3 numeronäppäimistö 0

Käytä key-arvoa, kun merkitys ratkaisee: Enter lähettää, Escape sulkee, “?” avaa ohjepaneelin. Käytä code-arvoa peleissä ja pikanäppäimissä, jotka riippuvat näppäinten sijainnista, kuten WASD-liikkeessä, jonka pitää pysyä samoilla paikoilla myös ranskalaisella AZERTY- tai saksalaisella QWERTZ-näppäimistöllä. Vältä keyCode- ja which-arvoja uudessa koodissa: ne ovat vanhentuneita, niiden arvot vaihtelevat selaimittain välimerkeillä (Firefox lähettää puolipisteelle 59, kun Chrome lähettää 186), eivätkä ne erota vasenta ja oikeaa Shiftiä tai kahta Enter-näppäintä toisistaan. Ne on silti hyvä tuntea, kun ylläpidät vanhempaa koodia, minkä vuoksi tämä työkalu näyttää ne.

Koodinpätkästä

Luotu kuuntelija vertaa täsmälleen painamaasi näppäintä, mukaan lukien Ctrl, Alt ja Meta. Kun tulostettava merkki tunnistetaan key-arvolla, Shift jätetään pois, koska se on jo osa arvoa: Shift+1 antaa US-asettelulla arvon "!". Kun painat muokkausnäppäintä yksinään, koodinpätkä ei toista sen lippua. Muista, että metaKey on Macissa Cmd-näppäin ja PC:llä Windows-näppäin, joten alustariippumattomissa pikanäppäimissä testataan yleensä event.ctrlKey || event.metaKey.

Suomalaisella näppäimistöllä esimerkiksi ä, ö ja å tuottavat key-arvon mukaisen merkin, mutta code kertoo US-asettelun mukaisen sijainnin, esimerkiksi Semicolon tai Quote. Tämän vuoksi code sopii sijaintiin ja key merkitykseen.

Usein kysytyt kysymykset

Miksi keyCode näyttää saman numeron eri merkeille?

keyCode tunnistaa näppäimen, ei merkkiä. Numero 1 ja “!” jakavat arvon 49, ja “a” ja “A” arvon 65. Lue key, jos haluat todellisen merkin.

Miksi AZERTY-näppäimeni näkyy arvona KeyQ?

code nimeää näppäimet niiden US QWERTY -näppäimistön sijainnin mukaan. Ranskalaisen näppäimistön A-näppäin on siinä kohdassa, jossa US-näppäimistöllä on Q, joten sen code on KeyQ, kun taas key on “a”.

Mitä "Dead" tarkoittaa arvossa event.key?

Se on kuollut näppäin, kuten ^ tai ¨, joka odottaa seuraavaa näppäintä muodostaakseen aksenttikirjaimen. Lopullinen merkki tulee seuraavasta näppäintapahtumasta tai tekstikentän input-tapahtumasta.

Miksi event.repeat on kyllä?

Pidät näppäintä pohjassa ja käyttöjärjestelmä lähettää automaattisia toistoja. Tarkista event.repeat ohittaaksesi ne, esimerkiksi jotta pikanäppäin laukeaa vain kerran.

Tallennetaanko tai lähetetäänkö kirjoittamani?

Ei. Tämä sivu lukee näppäintapahtumat selaimessasi, eikä niitä lähetetä minnekään. Historia katoaa, kun lataat sivun uudelleen tai poistut siitä.

Aiheeseen liittyvät työkalut