┐(´ー｀)┌なJavaScript雑記

keypressのkeyCodeの謎

JS

keypressはkeydown、keyupとはキーコードが違う。

• 各ブラウザのキーに対するキーコード表[JavaScript]
• keyイベント(keypress,keyup,keydown)の確認(keyCode,charCode)

Operaでは唯一文字入力を無効にできるイベントです（多分）。

Firefoxはkeydownでも無効化できますが、何故か無効化できないときがあります（後述）。

キーコード表にダブりがある

"Delete"と"."が同じコード(46)、"Insert"と"-"が(46)で判別できない。

"Shift + 2"(”)と"Page Down"が同じコード(34)で、"Shift + Page Down"を押すとevent.shiftKey==true,コード34で判別できない。

できないはず無いだろうと思ってkeyCodeとcharCode、whichを調べる。

javascript:document.addEventListener('keypress', function(e){
	e.preventDefault();
	document.title = 'keyCode: ' + e.keyCode + '  charCode: ' + e.charCode + '  which: ' + e.which;
},false);

Firefox

keyCode

"Enter"とか"Page Down"などの記号を取得できる。a-z0-9と"Space"は取得できない。

charCode

keyCodeで取得できない物が取得できる。多分。

charCodeはcharCodeAtと同じ物が取れるんですかね。

そうだとすると「入力時に１文字のキーはcharCodeで取得する」と考えてよさそう。

which

charCodeと同じ物＋Enter,BackSpaceが取得できる。

その他

これらで取得できる物でWindowsキーだけe.preventDefaultでキャンセルできない。

Ctrl、Shift、Altキーは取得できない。

"Delete"と"Insert"はkeyCodeのみ反応するから"."や"-"と判別できる。

Opera

keyCode

完璧。Ctrl類も取得できる。

charCode

無い。

which

a-z0-9とCtrl類,Home,End,Insert,Deleteは取得できる。

矢印キー,PageDown,PageUp,ファンクションキー(F1-F12)などは取得できない。

その他

Windowsキーはやっぱりキャンセルできない。

keyCodeで全部取れるのでwhich使う機会はかなり少ないと思う。

ただどちらも"Delete"と"."が46、"Insert"と"-"が45を返すので判別できない気がする。

keydown

javascript:document.addEventListener('keydown', function(e){
	e.preventDefault();
	if (e.keyCode == 49) alert('hoge')
},false);

このスクリプトだと「1」のみ文字入力が無効になりません。

• keyCode==49なのでｑの上の「1」です。

alertをやめると入力は無効になるんですけどね…。

Firefox 3 と 3.1b2preで確認。

これくらいの処理ならalertをsetTimeoutで実行すれば対処できますが。。

• ちなみに、Operaで↑を試すと「1」だけ無効になり、他は有効です（謎）

バグなのか仕様なのか…わけわかりません┐(´ー｀)┌

調べてみて

var key = (e.keyCode || e.which);

厳密にキーを判別するにはこういう書き方はNGっぽいですね。

Permalink | コメント(0) | トラックバック(0) | 17:34