【jQuery】キー入力の検知は、ブラウザ毎に処理を分ける必要がある

最終更新: 2012-11-11
※ 分岐の必要はありません。
全てのブラウザで"keydown"が適しています。

残り使用文字数を表示するなど、キー入力のたびに何らかの処理を
おこないたい場合、キー入力を検知するイベントハンドラとして
"keypress"と"keydown"どちらがいいのでしょうか。

結論は、Operaは『keypress』、それ以外は『keydown』、でした。
Operaの更新により、すべて"keydown"で正しく検知できます。

【実験用ページ】
http://www.usamimi.info/~sutara/sample/jq_key.php

実験結果

	keypress		keydown
	Delキー Backspace	その他	Delキー Backspace	その他
Firefox 16.0	○	○	○	○
Chrome 23.0	×	○	○	○
Safari 5.1.7	×	○	○	○
Opera 12.10	×	○	○	○
Opera 11.52	○	○	×	×
IE6,7,8,9	×	○	○	○

※ 以下の内容は古くなっています。
Opera 12以降ならば分岐させる必要はありません。

---

分岐例

『keypress』では、FirefoxとOpera以外、DeleteとBackspaceに反応してくれません。
『keydown』では、Operaでキーを押し続けても連続入力として認識してもらえません。
そこで、Operaとそれ以外で処理を分ける必要があります。

if(window.opera){

	//Opera

	$('#hoge').keypress(funcHoge);

}else{

	//それ以外

	$('#hoge').keydown(funcHoge);

}

function funcHoge(){ ... }

以前、『$.support』で分岐する方法を記載していましたが、そんなことをする必要はありませんでした…。
『window.opera』で十分です。

※$.supportによるブラウザの判別について↓
http://d.hatena.ne.jp/sutara_lumpur/20100717/1279347937