フォーム入力に役立つjQueryプラグイン

jQuery UI／プラグインの活用（3）

フォーム入力を制限するText input field filter

　次は、入力制限をかけられるText input field filterプラグインを使ってみましょう。プラグインはこちらからダウンロードします。

　ここでは、リスト1で取り上げたInput Hint Overlayプラグインに、Text input field filterプラグインを追加してみます。Text input field filterの使い方をリスト2に、オプションを表1に示します。

リスト2 Text input field filterの使い方

$('#input_id').filter_input({regex:'reg', live:true}); 

　#input_idでは、input要素のidを指定します。

表1 Text input field filterのオプション

オプション	説明
reg	入力を許可する文字列を正規表現で表す
live	live()関数の有効／無効を指定する（true／false）。デフォルトはfalse。falseを指定した場合はbind()関数が使われる

　live()関数とbind()関数は、イベントに対してハンドラを登録できる関数です。両者の違いは、例えば、li要素に対してclickイベントを登録した場合、bind()関数であれば、クリックした時点に対してイベントが登録されるだけですが、live()関数は、その後、動的に追加されたli要素に対しても、クリックに対してハンドラが実行されます。

　では、氏名欄には大文字のアルファベットのみ、電話番号欄には数字のみ、血液型欄には「a、b、o、ab」のみの入力を受け付けるようにしてみましょう。Text input field filterプラグインの使用例を示します（リスト3）。

リスト3 Text input field filterプラグインの使用例（jQueryPlugin_input text field filtering.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>input text field filteringサンプル</title>
//1．jQueryの読み込み
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.inputHintOverlay.js"></script>
//2．Text input field filterプラグインの読み込み
<script type="text/javascript" src="js/jquery.filter_input.js"></script>

<script type="text/javascript">
<!--
    $(function () {
        $('form#myForm').inputHintOverlay(5, 3);
　　　　//3．Text input field filterプラグインの実行
        $('#name').filter_input({ regex: '[A-Z]', live: true });
        $('#phone').filter_input({ regex: '[0-9]', live: true });
        $('#bloodtype').filter_input({ regex: '[a,b,o,ab]', live: true });     
    });
//-->
</script>
<style type="text/css">
    .inputHintOverlay { color: #999; font-size: 14px; }
</style>

</head>
    <body>
        <h1 id="title">input text field filteringサンプル</h1>
	    <form id="myForm" action="">
		    <fieldset>
            氏名：<input type="text" id="name" title="大文字のアルファベットで入力してください。" size="50"  />
            電話番号：<input type="text" id="phone" title="数字で入力してください。" size="50" />
            血液型：<input type="text" id="bloodtype" title="a,b,o,abのいずれかで入力してください。" size="50" />
		    <input type="button" id="submit" value="登録" />
        </fieldset> 
        </form>
    </body>
</html>

　1、2でjQueryとプラグインを読み込みます。そして、3でプラグインを実行しています。リスト2の実行結果を図2に示します。

図2 Text input field filterの実行結果

　この状態で指定したフォーマット以外で各項目に入力しようとしても、テキストボックスの中には何も入力できません（図3）。

図3 Text input field filterの実行結果（入力制限時）

　例えば、大文字のみを入力させたい場合、Text input field filterを利用することで、わりと簡単に実装できます。Text input field filterについての詳細はこちらを参照ください。