フォームのキー入力を制御するjQueryプラグイン | Inhale n’ Exhaleフォームで入力可能な文字種を制限したい場合に使えるjQueryのプラグインを作ってGitHubにアップしてみた。使い方は至って簡単。jQuery本体とjquery.klimit.jsをHTMLに読み込んで、キー入力制限をしたいフォーム（inputタグ）のclass属性にklimit-*を追加するだけ。
プラグインでデフォルトで用意したクラスは以下の通り。
klimit-digit：10進数のみ入力可能klimit-hex：16進数のみ入力可能klimit-lower：英小文字のみ入力可能klimit-upper：英大文字のみ入力可能klimit-alpha：英字のみ入力可能klimit-alnum：英数字のみ入力可能klimit-graph：英数字と記号のみ入力可能klimit-mail：メールアドレスに使用できる文字のみ入力可能
klimit-hexやklimit-graphは用途があるか疑問だが…。
実際にデモで体験してもらうのが一番わかりやすいだろう。
ソースコードはこうなっている。
4 | <script src="http://code.jquery.com/jquery.js"></script> |
5 | <script src="jquery.klimit.js"></script> |
8 | <div><input type="text" class="klimit-digit" />klimit-digit</div> |
9 | <div><input type="text" class="klimit-hex" />klimit-hex</div> |
10 | <div><input type="text" class="klimit-lower" />klimit-lower</div> |
11 | <div><input type="text" class="klimit-upper" />klimit-upper</div> |
12 | <div><input type="text" class="klimit-alpha" />klimit-alpha</div> |
13 | <div><input type="text" class="klimit-alnum" />klimit-alnum</div> |
14 | <div><input type="text" class="klimit-graph" />klimit-graph</div> |
15 | <div><input type="text" class="klimit-mail" />klimit-mail</div> |
プラグインがデフォルトで用意しているklimit-*とは異なる独自のルールでキー入力制御をしたいこともあるだろう。例えば、ユーザー名のフォームで英数字と.（ドット）、_（アンダースコア）のみを許可したいような場合は、以下のようにklimit()に許可する文字種を配列で渡せばよい。
4 | <script src="http://code.jquery.com/jquery.js"></script> |
5 | <script src="jquery.klimit.js"></script> |
8 | $('input#username').klimit([$.KLIMIT.ALNUM, '._']); |
13 | <input type="text" id="username" /> |
jQuery.KLIMITには、DIGIT、HEX、LOWER、UPPER、ALPHA、ALNUM、GRAPHというプロパティがあり、jQuery.klimit()に引き渡せる文字集合が定義されているので、これらと組み合わせることで簡単に独自のルールを作ることができる。
ところで、最初のデモのklimit-mailで@や_（アンダースコア）が入力できなくておかしいと思った人もいるだろう。jquery.klimit.jsはデフォルトではUS101キーボードのキー配列に基づいて入力制御をしており、日本語の106/109キーボードを使っていると一部の記号のキー配列がUS101キーボードとは異なっているため期待通りの制限がかからない。日本語の106/109キー配列に対応させるためには、jquery.klimit.jsに先立ってjquery.klimit.kb109.jsを読み込む必要がある。
4 | <script src="http://code.jquery.com/jquery.js"></script> |
5 | <script src="jquery.klimit.kb109.js"></script> |
6 | <script src="jquery.klimit.js"></script> |
jquery.klimit.kb109.jsを読み込んだバージョンのデモがこちら。
他の国のキー配列（例えば韓国語やアラビア語）がどうなっているかわからないが、jquery.klimit.kb109.jsのようなキー配列定義ファイルを作って、US101キーボードとは異なるキーだけをjQuery.KLIMIT.KEY_CODE_MAPに登録することで、他のキー配列にも対応できるようになっている。
ただし、ブラウザからはユーザーが使っているキーボードが何なのか知る由もないし、モバイルデバイスのソフトキーボードでは制御できるかも怪しい（面倒で試してないだけ）。実際にこのプラグインが使えるシーンは少ないかもしれない。
klimit-digit
klimit-hex
klimit-lower
klimit-upper
klimit-alpha
klimit-alnum
klimit-graph
klimit-mail
>> すみません、すべての欄に日本語で入力してみると、全部ができてしまうんです。
日本語入力を禁止するためにCSSで
ime-mode: disabledを設定する必要があります。