javascriptでキーが押された時のイベント処理について、調べてみました。

prototype.jsでは、以下のサイトで触れられているような処理を行っているようです。

• Enjoy*Study - prototype.jsでの、keypressイベントの扱いについて
• 山岸めも - 「Operaを使つてゐる場合、Prototype.jsは、keypressをkeydownに置換へてしまふ」件をどうにかしてみた

確認したブラウザは以下の通り。

• Safari 2.0.4 for Mac OS X
• Opera 9.20 for Mac OSX
• Firefox 2.0.0.3 for Mac OS X
• iCab 3.0.3 for Mac OS X
• Internet Explorer 5.2.3 for Mac OS X
• Internet Explorer 5.5 for Windows XP
• Internet Explorer 6.0 for Windows XP
• Internet Explorer 7.0 for Windows XP

keydownとkeypressが送られる回数をカウントするという簡単なサンプルを用意して確認しました(スクリプトの内容)。

ブラウザ	keydown	keypress
Safari 2.0.4	押したとき一度だけイベント発生	キーリピートでイベント発生
Opera 9.20	押したとき一度だけイベント発生	キーリピートでイベント発生
Firefox 2.0.0.3	押したとき一度だけイベント発生	キーリピートでイベント発生
iCab 3.0.3	キーイベントそのものが発生しない？(註1)	キーイベントそのものが発生しない？(註1)
Internet Explorer 5.2.3	キーリピートでイベント発生	キーリピートでイベント発生(註2)
Internet Explorer 5.5/6.0/7.0	キーリピートでイベント発生	キーリピートでイベント発生(註2)

[註1] 私が試した限り、iCabではキーイベントを拾ってくれませんでした。そもそもオブジェクトにフォーカスを当てることができない感じです。マウスクリックイベントは他のブラウザと同じように扱ってくれます。

[註2] Internet Explorerの挙動はちょっと面白くて、keypressイベントでは拾ってくれないキーが存在します。例えば、カーソルやタブキーはkeydownイベントでは捕捉されますが、keypressイベントでは捕捉できません。ここでは、「英数字」とありますが、おそらくキーを押したときに何らかの文字が出力されるキーかと思います。

また、オブジェクトに対してイベントを割り付ける関数については、attachEventとaddEventListenerがありますが、

var check_atatchEvent = !!window.attachEvent;
var check_addEventListener = !!window.addEventListener;

というコードで、対応の有無を調べることができます。

ブラウザ	attachEvent	addEventListener
Safari 2.0.4	false	true
Opera 9.20	true	true
Firefox 2.0.0.3	false	true
iCab 3.0.3	false	true
Internet Explorer 5.2.3	false	false
Internet Explorer 5.5/6.0/7.0	true	false

という訳で、キーが押された時のイベント処理を、ここで挙げたブラウザについて統一させる場合。

addEventListenerに対応しているか否かだけを調べて、対応していればkeypressで、そうでなければkeydownで処理する。

というのが良さそうです。

Safari 2.0.4では、問題なくkeypressイベントをハンドリングできるようですが、ここを見る限り、もしかしたら、過去のWebkitではkeypressがうまくハンドルできないというのがあったのかもしれません。