イベントのkeyCodeとcharCode

Firefox JavaScript

イベントのキーコードの取得には

  • event.keyCode
  • event.charCode

の二種類があるんだが、keypressイベントとkeydownイベントとで出方が違うことに気付いた。

keypressとkeydownの表す数値は以下の通り

  • keyCodeにはキーを表す特殊コードを表す数値として出る*1
  • charCodeにはASCII文字コード表に対応した10進数として出る

以下に幾つか試した結果を書くので参考に。ただ、特殊キーに当たりそうな(ex. windows,無変換, IMEオン時の挙動)ものは環境によって異なりそうなので注意。

keypress

  • ASCII文字コードとして認識できるものはcharCodeに出る
  • そうでないものはkeyCodeに出る
  • IMEオン時にイベントが挙がることは期待できない((keyCodeに229で挙がる時と挙がらない時があった))
押したキー charCode keyCode 備考
a 97 0 "a"
Shift+a 65 0 "A"
Alt イベント挙がらず
ESC 0 27 DOM_VK_ESCAPE
SPACE 32 0 " "
↓ 0 40 DOM_VK_DOWN
F1 0 112 DOM_VK_F1
windowsキー 0 91 対応なし
無変換 0 29 対応なし

keydown

  • keyCodeに出て、charCodeには出ない
  • 同時に複数の文字を押下しても別々にイベントが挙がる
  • IMEオン時にも押されたキーに対応するkeyCodeで挙がる
押したキー charCode keyCode 備考
a 0 65 DOM_VK_A
Shift 0 16 DOM_VK_SHIFT
Alt 0 18 DOM_VK_ALT
ESC 0 27 DOM_VK_ESCAPE
SPACE 0 32 DOM_VK_SPACE
↓ 0 40 DOM_VK_DOWN
F1 0 112 DOM_VK_F1
windowsキー 0 91 対応なし
無変換 0 29 対応なし

まとめ？

IMEオン時とAlt以外は、まぁどちらでやっても大差無さそうだ。Shift,Ctrl,Altに関しては、event.shiftKey,event.ctrlKey,event.altKeyで真偽値を取れるし。
また、

onkeydown

The keydown event is sent to an element that has the focus and a key is pressed but not released.

onkeypress

The keypress event is sent to an element that has the focus and a key is pressed and released. When the user presses a key, the keydown event is first sent, followed by the keypress event and then the keyup event. In a textbox, a user normally can hold down a key to repeat a character In this case, multiple sets of key events are sent as if the user rapidly pressed the same key repeatedly.

と書かれている通り、keydownイベントの方が先に挙がる。

追記

そういえば、オイラはkeydownイベントを勘違いしていた。mousedownイベントと同様にキーが押された瞬間に出るだけで、押し続けていた場合には出ないと思っていたんだが、keypress,keydown、どちらも押し続けているとイベントがドカドカ挙がるみたい。困ったものだ。

*1:参照：KeyboardEvent (XULPlanet.com)