イベントの種類

キー入力のイベントは、keydownとkeyupで、keydownはキーを押したときに発火し、keyupはキーを離したときに発火する。

keypressはデバイス依存度が高いためfired（廃止）とされている。

イベントリスナーの登録

イベントの登録方法は以下の通り（全て小文字であることに注意）。

.addEventListener('keydown', callback, false)
.addEventListener('keyup', callback, false)

.on('keyDown', callback)
.on('keyUp', callback)

イベントの発生順

基本

キーが押下されるとkeydownイベントが発生し、元に戻るとkeyupイベントが発生する。たとえば英子文字のaの場合は以下の順番。

1. keydown, 'a'
2. keyup, 'a'

キーを押し続けるとリピート機能によりkeydownが繰り返して発生し、離したときにkeyupイベントが1回発生する。

SHIFTキーを押しながらの場合は、例えば英大文字のAの場合以下の順番。

1. keydown, 'Shift'
2. keydown, 'A'
3. keyup, 'A'
4. keyup, 'Shift'

ただしSHIFTキーにもリピート機能が働いた場合、keydownが繰り返される。

TABとCAPS LOCK

TABキーとCAPS LOCKキーの2つのキーについては、keydownは発生するがkeyupは捕捉しない(1.1.0と3.4.1で同じ結果)。

ただしSHIFT + CAPS LOCKはkeyの値が'CapsLock'としてkeydownとkeyupの両方が発火する。

イベントの発火状況については以下のコードで確認した。

キーの内容の参照

参照方法

キーの内容は、コールバックの引数で得られるイベントオブジェクトのプロパティーで参照する。

addEventListener(event_name, (e) => {})

on(event_name, (e) => {})

上記の場合、コールバックの引数eのプロパティーkey、codeで必要なキーの値を参照する。ただしcodeプロパティーはJQuery3.4.1など新しいバージョンからでないとundefinedになる。

また、keyCodeプロパティーはdeprecatedとなっている。

keyプロパティー

キーボードのキー配置によらない文字や機能としての値はkeyプロパティーで参照する。

codeプロパティー

codeプロパティーはキーボードに割り付けられた文字や機能に関係なく、キーボード上の位置としての値を返す。QWERTY配列上の文字で返すため、キー配列の種類に依らない物理的なキー位置を特定できるが、Dvorak配列など割り当てられた文字の位置が違う場合、ユーザーの意図した文字と違う値が変える。

CTRLやSHIFTど左右にキーがある場合、それらの左右が区別される。

JQueryでは3.1.xでもundefinedで、3.4.1では機能する。

機能キーの押下状態の捕捉

以下のプロパティーは、SHIFT/CTRL/ALTの各キーが押されている場合にtrueを返す。

このコードの実行例を以下に示す。a単独、ALT+b、CTRL+c、SHIFT+dと押した結果、それぞれの機能キーの押下状況が捕捉されている。