キーボードの方向キーが取得できない場合は、イベントが「keypress」になっていないか注意！

キーボードの方向キー（十字キー、矢印キー）が取得できなくてハマってしまったので解決方法をメモしておきます。

この現象は以下例のようにイベントリスナーを「keypress」に設定している時に発生します。

document.addEventListener('keypress',function(e){
    console.log(e.keyCode);
},false);

この例の場合、方向キーを打ってもコンソールには何も表示されません。特殊キー以外はキーコードがコンソールに表示されます。

イベントを「keypress」から「keydown」に変更することでこの問題を解決することができます。

document.addEventListener('keydown',function(e){
    console.log(e.keyCode);
},false);

addEventListenerに設定するイベントを「keydown」にすることで、方向キーの取得が可能になり、コンソールにキーコードが表示されるようになります。

なぜ「keypress」では方向キーのキーコードが取得できないのに「keydown」だと取得できる仕様なのかが不思議ですね。

中途半端に「keypress」でも通常キーのキーコードは取得できてしまっていたのが解決を遠ざけてしまっていたのですが、わかってしまえばなんとも簡単な理由でした。