フォームの入力を限定するjavascript「MaskedInput」

フォームでは、電話番号や郵便番号、プロダクトIDなどの定型的な入力方式を固定することがユーザビリティの向上に役立つかも知れません。
digitalBushMaskedInputでは、リアルタイムにフォームの入力方式をチェックすることができます。

sponsors

使用方法

MaskedInputjquery.maskedinput-1.0.jsに加え、jQueryが必要になります。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.maskedinput-1.0.js" type="text/javascript"></script>
上記のようにhead内にスクリプトを埋め込み、入力方式を固定したいinputのidに対しscriptを以下の様に記述します。
<script type="text/javascript">
jQuery(function($){
$("#inputのid名").mask("記述方式");
});
</script>
記述方式には以下の形式が使用できます。
例)99/99/9999(日付など)
また入力前に表示しておく記号はデフォルトでは_(アンダーバー)ですが変更することができます。
例)半角の空白にする例
$("#inputのid名").mask("記述方式",{placeholder:" "});
さらに入力した項目をアラートで表示するには以下の記述を施します。
$("#inputのid名").mask("記述方式",completed:function(){alert("あなたは次の文字を入力しました: "+this.val());}});
HTMLは普段通り記述し、上で指定したidを付与するだけです。
<input id="id名" type="text">

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル

日付 99/99/9999
電話番号 (99) 9999-9999
請求書番号 99-9999999
プロダクトキー a*-999-a999