フォーム入力を制限する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についての詳細はこちらを参照ください。
