KeyboardEvent-arvo (keyCodes, metaKey jne.) - CSS-temppuja

Kun KeyboardEventtulipalot, voit testata, mitä näppäintä painettiin koska tapahtuma sisältää tietoja voit kirjoittaa logiikkaa vastaan.

document.addEventListener("keydown", function(event) ( console.log(event.which); ))

Esimerkiksi painamalla "a" saat 65. Ilmeisesti on parasta kirjoittaa logiikkaa, jota vastaan, koska keyCode ja charCode ovat monimutkaisia:

Event.which -ominaisuus normalisoi event.keyCode ja event.charCode. On suositeltavaa katsoa tapahtumaa. Joka näppäimistön näppäinten syöttämistä varten.

Ja:

Näppäintapahtumassa painetun näppäimen Unicode-arvo tallennetaan joko keyCode- tai charCode-ominaisuuteen, ei koskaan molempiin. Jos painettu avain tuottaa merkin (esim. 'A'), charCode asetetaan kyseisen merkin koodiksi kirjainkokoa kunnioittaen. (ts. charCode ottaa huomioon, pidetäänkö vaihtonäppäintä alhaalla). Muussa tapauksessa painetun näppäimen koodi tallennetaan keyCode-koodiin.

Testerityökalu

Katso Chris Coyierin (@chriscoyier) Pen event.keyCode -testaaja CodePenistä.

Avainkoodiarvot

Tässä on taulukko, joka sisältää arvot kohteesta event.which.

Avain Koodi askelpalautin 8 välilehti 9 tulla sisään 13 siirtää 16 ctrl 17 alt 18 tauko 19 korkkilukko 20 paeta 27 (välilyönti) 32 sivu ylös 33 sivu alas 34 loppuun 35 Koti 36 vasen nuoli 37 nuoli ylöspäin 38 oikea nuoli 39 alanuoli 40 lisää 45 poistaa 46 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 a 65 b 66 c 67 d 68

Avain Koodi e 69 f 70 g 71 h 72 i 73 j 74 k 75 l 76 m 77 n 78 o 79 s 80 q 81 r 82 s 83 t 84 u 85 v 86 w 87 x 88 y 89 z 90 vasen ikkuna-näppäin 91 oikean ikkunan näppäin 92 Valitse-näppäin 93 numeronäppäin 0 96 numeronäppäimistö 1 97 numeronäppäin 2 98 numeronäppäin 3 99 numeronäppäin 4 100 numeronäppäin 5 101 numeronäppäimistö 6 102 numeronäppäimistö 7 103

Avain Koodi numeronäppäimistö 8 104 numeronäppäimistö 9 105 moninkertaistua 106 lisätä 107 vähentää 109 desimaalipiste 110 jakaa 111 f1 112 f2 113 f3 114 f4 115 f5 116 f6 117 f7 118 f8 119 f9 120 f10 121 f11 122 f12 123 numerolukko 144 vierityslukko 145 puolipiste 186 yhtäläisyysmerkki 187 pilkku 188 viiva 189 aikana 190 vinoviiva 191 vakava aksentti 192 avoin kiinnike 219 takaisin kauttaviiva 220 sulje jarru 221 yksi lainaus 222

Zell Liew huomasi, että 3 näistä avainkoodeista oli erilaisia ​​Firefoxissa kuin muut selaimet

• ; on 59 Firefoxissa, mutta 186 muissa selaimissa.
• = on 61 Firefoxissa, mutta 187 muissa selaimissa.
• - on 173 Firefoxissa, mutta 189 muissa selaimissa.

Tärkeää: Nämä näppäinkoodi arvot ovat voimassa vain vuonna keydownja keyuptapahtumissa. Macissa keypresstapahtumat antavat sinulle aivan erilaiset koodisarjat.

Esimerkiksi:

Avain	event.which Keydownissa	event.which näppäimen painalluksessa
a	65	97
b	66	98
c	67	99