フォームで入力可能な文字種を制限したい場合に使える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は用途があるか疑問だが…。
実際にデモで体験してもらうのが一番わかりやすいだろう。
ソースコードはこうなっている。
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.js"></script> <script src="jquery.klimit.js"></script> </head> <body> <div><input type="text" class="klimit-digit" />klimit-digit</div> <div><input type="text" class="klimit-hex" />klimit-hex</div> <div><input type="text" class="klimit-lower" />klimit-lower</div> <div><input type="text" class="klimit-upper" />klimit-upper</div> <div><input type="text" class="klimit-alpha" />klimit-alpha</div> <div><input type="text" class="klimit-alnum" />klimit-alnum</div> <div><input type="text" class="klimit-graph" />klimit-graph</div> <div><input type="text" class="klimit-mail" />klimit-mail</div> </body> </html>
プラグインがデフォルトで用意しているklimit-*とは異なる独自のルールでキー入力制御をしたいこともあるだろう。例えば、ユーザー名のフォームで英数字と.（ドット）、_（アンダースコア）のみを許可したいような場合は、以下のようにklimit()に許可する文字種を配列で渡せばよい。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.klimit.js"></script>
<script>
$(function() {
$('input#username').klimit([$.KLIMIT.ALNUM, '._']);
});
</script>
</head>
<body>
<input type="text" id="username" />
</body>
</html>
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を読み込む必要がある。
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.js"></script> <script src="jquery.klimit.kb109.js"></script> <script src="jquery.klimit.js"></script> </head> <body> （略） </body> </html>
jquery.klimit.kb109.jsを読み込んだバージョンのデモがこちら。
他の国のキー配列（例えば韓国語やアラビア語）がどうなっているかわからないが、jquery.klimit.kb109.jsのようなキー配列定義ファイルを作って、US101キーボードとは異なるキーだけをjQuery.KLIMIT.KEY_CODE_MAPに登録することで、他のキー配列にも対応できるようになっている。
ただし、ブラウザからはユーザーが使っているキーボードが何なのか知る由もないし、モバイルデバイスのソフトキーボードでは制御できるかも怪しい（面倒で試してないだけ）。実際にこのプラグインが使えるシーンは少ないかもしれない。
2 コメント
返信する
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
klimit-digit
klimit-hex
klimit-lower
klimit-upper
klimit-alpha
klimit-alnum
klimit-graph
klimit-mail
>> すみません、すべての欄に日本語で入力してみると、全部ができてしまうんです。
日本語入力を禁止するためにCSSで
ime-mode: disabledを設定する必要があります。