フォームの入力を制限する
こんな感じでフォームの入力文字を制限する方法。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」と入力したことになります。