<< Prev Page Next Page >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


数字しか書けないinputとか英単語しか書けないinputとか

brazilの人が「いやーそこはやっぱりkeydownで禁止しなきゃだめでしょ」と言ったのでこんな面倒なことに手を染めることに。

方針

入力される文字をイベントから取り出して、正規表現にマッチしなかったらイベントをキャンセルする。ただし、Tabとか矢印とかEnterとかを邪魔しないように。

イベントの種類

ちょっと実験用のHTMLを作って調べてみたところ、keydownイベントとkeypressイベントではevent.keyCodeとかで取れる値が違ってた。keydownでは仮想キーの値なので、記号キーとか押すと220とかめっちゃでかい数字になって使えない。今回は「何の文字を入力しようとしたのか」によって、キーイベントを無かったことにしちゃうのが目的なので、keypressイベントを使う。

[キーイベントから文字を取る]

最初は軽く考えてた。jQueryではkeyCodeとcharCodeを合わせた「which」っていうプロパティが使えるから

var char = String.fromCharCode(evt.which);

ってやればどのブラウザでも入力する文字がとれるねーって思ってた。甘かった。あまあまちゃん。Firefoxでカーソルキーがきかなくなった。

しばし悩んで各ブラウザでkeyCodeとcharCodeの値を取ってみたのが下の表。

keypressイベントでのkeyCode、charCode。
タイプしたキー
Firefox
IE
Safari for Windows
keyCode
charCode
keyCode
charCode
keyCode
charCode
a
0
97 (a)
97 (a)
undefined
97 (a)
97 (a)
/
0
47 (/)
47 (/)
undefined
47 (/)
47 (/)
[shift]
イベント発生せず イベント発生せず 0 0
[shift]+5 (JP106 %)
0
37 (%)
37 (%)
undefined
37 (%) 37 (%)
[左矢印]
37 (%)
0
イベント 発生せず 0 0
[shift]+7 (JP106 ')
0
39 (')
39 (')
undefined
39 (') 39 (')
[右矢印]
39 (')
0
イベント発生せず 0 0
[backspace]
8
0
イベント発生せず
8
8
[delete]
46 (.)
0
イベント発生せず 0
0
[enter]
13
0
13
undefined
13
13
[escape]
27
0
27
undefined
27
27
[space]
0
32 ( )
32 ( )
undefined
32 ( )
32 ( )
IME ONのとき
229
0
イベント発生せず イベント発生せず

いくつか問題があるにせよ、大体なんとかなるかな。

  • Firefoxでは制御キーをpressしたときにkeyCodeがあってcharCodeが0になる。文字を入力するとkeyCodeが0でcharCodeが入力文字。
  • IEでは制御キーでkeypressイベントが発生しない。
  • Safari(Win)では制御キーではkeyCodeもcharCodeも0
  • IMEがONのとき、FirefoxはとりあえずkeyCode229?他はイベント無し。

というわけで、keypressイベントから、何の文字を入力しようとしたのかを調べるコードはこれだ!

function pressedChar(event) { var code = 0; if (event.charCode === 0) { // Firefox, Safari control code code = 0; } else if (!event.keyCode && event.charCode) { // Firefox code = event.charCode; } else if (event.keyCode && !event.charCode) { // IE code = event.keyCode; } else if (event.keyCode == event.charCode) { // Safari code = event.keyCode; } if (32 <= code && code <= 126) { // ASCII文字の範囲内 return String.fromCharCode(code); } else { return null; } } function numberonly(event) { var char = pressedChar(event); if (char && !char.match(/\d/)) { return false; } else { return true; } } function wordonly(event) { var char = pressedChar(event); if (char && !char.match(/\w/)) { return false; } else { return true; } }

以下、IE以外の方はIMEをOFFにしてお楽しみください。

数字のみ:
英単語のみ:

Firefox3からはime-modeが有効になるらしいし、IMEのことは将来に後回し。というか実際には、これやったあとさらにonkeyupイベントでチェックしてハネる、という手を使っている。

ああ、ごめんごめん、HTML部のソースはこうです。
数字のみ:<input type="text" style="ime-mode:disabled" onkeypress="return numberonly(event)" /> 英単語のみ:<input type="text" style="ime-mode:disabled" onkeypress="return wordonly(event)" />


この記事に対するコメント

この記事に対するコメントの投稿



管理者にだけ表示を許可する

この記事に対するトラックバック

トラックバックURL
http://tockri.blog78.fc2.com/tb.php/119-04c727a7
この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。