フォームの入力を制限する

こんな感じでフォームの入力文字を制限する方法。digitalBushのMasked Input Pluginを利用しています。
HTMLはこんな感じ。

<form>
<table>
<tr><td>日付</td>
<td><input type="text" name="hoge1" id="date"/></td>
<td>9999/99/99</td></tr>
<tr><td>電話</td>
<td><input type="text" name="hoge2" id="phone"/></td>
<td>(999) 999-9999</td></tr>
<tr><td>製品番号</td>
<td><input type="text" name="hoge3" id="product"/></td>
<td>a*-999-a999</td></tr>
</table>
</form>

Masked Input Pluginを読み込んで

<script type="text/javascript" src="http://digitalbush.com/files/jquery/maskedinput/1.0/jquery.maskedinput-1.0.js"></script>

んでJavascriptをこんなん。

$(document).ready(function(){
  $("#date").mask("9999/99/99");
  $("#phone").mask("(999)999-9999");
  $("#product").mask("a*-999-a999");
});

mask()関数の引数で渡した「a」「9」「*」がポイントです。それぞれの意味は以下の通り。

a	アルファベットのみ入力可(A-Z,a-z)
9	数字のみ入力可(0-9)
*	アルファベットと数字が入力可(A-Z,a-z,0-9)

上記以外の文字は勝手に入力されます。つまり日付入力として"9999/99/99"を指定すれば、入力時に「20071015」と入力すれば「2007/10/15」と入力したことになります。