Webページ内にテキストを設置する際、
数字しか入力しない場合や、英数字のみ入力を許可した場合があります。
そんな時に便利なプラグインです。
jQuery AlphaNumeric：ダウンロード&デモ
http://www.shiguenori.com/material/alphanumeric/index.html
jQuery AlphaNumeric：デモ
http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_forminput/alphanumeric.inc&ttl=%90%DD%92u%83T%83%93%83v%83%8B
サンプルをご覧になる場合は、日本語入力をOFFでご確認下さい。
数値だけの入力を許可する
いつも通り
・JavaScriptファイルのインクルード
・タグ設置
・タグに対しての関数コール
が必要です。
<script type='text/javascript' src='jquery.alphanumeric.js'></script><input id="numericOnly" type="text" size="30" style="ime-mode: disabled;">inputタグは、ime-Mode を無効にしておきます。
あとは、このタグに対して関数を一つ呼ぶだけで完了です。
$("#numericOnly").numeric();ものすごく簡単な作業ですね。
英字だけの入力を許可する
// 英字の大文字小文字を許可
$("#alphaOnly").alpha();
// 英字の小文字を許可
$('#alphaOnly').alpha({nocaps:true});
// 英字の大文字を許可
$('#alphaOnly').alpha({allcaps:true});
プラスアルファで特定の文字を許可する
allowで指定した文字は許可されます。
// 英字 + '-' '@' '.' を許可
$("#alphaOnly").alpha({allow:"-@."});
説明を省きますが、 英数字を許可するための関数が、alphanumeric です。
$("#alphaNumericOnly").alphanumeric();
これだけの処理が使えれば、十分でしょう。
もっと制限したい人であれば、一からプログラムを自作していると思います。
てっとり早く実装したいからプラグインを使うわけですからね。
プラグインの実装方法は、keypressイベント時に文字列を判定し、
入力できない文字の場合は、イベントをキャンセルしているだけです。
プログラム自体も短くシンプルですので中をみてみるといいかと思います。
では次回は、文字数制限を行うプラグインを紹介します。