KeyboardEvent Değeri (keyCodes, metaKey, vb.) - CSS Hileleri

Bir KeyboardEventateşlendiğinde, hangi tuşa basıldığını test edebilirsiniz çünkü bu olay, mantığa karşı yazabileceğiniz bilgileri içerir.

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

Örneğin, "a" tuşuna basarak elde edersiniz 65. Görünüşe göre, keyCode ve charCode'un karmaşık olduğu için mantık yazmak en iyisidir:

Event.which özelliği, event.keyCode ve event.charCode'u normalleştirir. Klavye tuş girişi için olayı izlemeniz önerilir.

Ve:

Bir tuşa basma olayında, basılan tuşun Unicode değeri keyCode veya charCode özelliğinde saklanır, hiçbir zaman her ikisinde birden saklanır. Basılan tuş bir karakter (örneğin 'a') üretirse, charCode, harf büyüklüğüne bağlı olarak o karakterin koduna ayarlanır. (yani, charCode, shift tuşunun basılı tutulup tutulmadığını dikkate alır). Aksi takdirde, basılan tuşun kodu keyCode'da saklanır.

Test Aracı

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen event.keyCode test cihazına bakın.

Anahtar kodu değerleri

Buradaki değerleri içeren bir tablo event.which.

Anahtar Kod geri tuşu 8 sekme 9 giriş 13 vardiya 16 ctrl 17 alternatif 18 duraklat / ara 19 büyük harf kilidi 20 kaçış 27 (Uzay) 32 sayfa yukarı 33 sayfa aşağı 34 son 35 ev 36 sol ok 37 yukarı ok 38 sağ ok 39 aşağı ok 40 eklemek 45 sil 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

Anahtar Kod e 69 f 70 g 71 h 72 ben 73 j 74 k 75 l 76 m 77 n 78 Ö 79 p 80 q 81 r 82 s 83 t 84 sen 85 v 86 w 87 x 88 y 89 z 90 sol pencere tuşu 91 sağ pencere tuşu 92 anahtar seç 93 sayısal tuş takımı 0 96 sayısal tuş takımı 1 97 sayısal tuş takımı 2 98 sayısal tuş takımı 3 99 sayısal tuş takımı 4 100 sayısal tuş takımı 5 101 sayısal tuş takımı 6 102 sayısal tuş takımı 7 103

Anahtar Kod sayısal tuş takımı 8 104 sayısal tuş takımı 9 105 çarpmak 106 Ekle 107 çıkarmak 109 ondalık nokta 110 bölmek 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 rakam kilidi 144 kaydırma kilidi 145 noktalı virgül 186 eşittir işareti 187 virgül 188 kısa çizgi 189 dönem 190 eğik çizgi 191 ciddi aksan 192 açık parantez 219 ters eğik çizgi 220 yakın braket 221 tek alıntı 222

Zell Liew, bu anahtar kodlarından 3'ünün Firefox'ta diğer tarayıcılardan farklı olduğunu fark etti.

• ; Firefox'ta 59, diğer tarayıcılarda 186'dır.
• = Firefox'ta 61, diğer tarayıcılarda 187'dir.
• - Firefox'ta 173, diğer tarayıcılarda 189'dur.

Önemli not: Bu anahtar kodu değerleri yalnızca giriş keydownve keyupolayları sırasında geçerlidir . Mac'te, keypressolaylar size tamamen farklı bir kod dizisi verir.

Örneğin:

Anahtar	event.which anahtarlamada	event.which tuşa basıldığında
a	65	97
b	66	98
c	67	99