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

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

使用方法
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>

記述方式には以下の形式が使用できます。
・a:A-Z、a-zのアルファベット
・9:0-9の数字
・*:A-Z、a-z、0-9の全て
例)99/99/9999(日付など)
また入力前に表示しておく記号はデフォルトでは_(アンダーバー)ですが変更することができます。
例)半角の空白にする例
$("#inputのid名").mask("記述方式",{placeholder:" "});
さらに入力した項目をアラートで表示するには以下の記述を施します。
$("#inputのid名").mask("記述方式",completed:function(){alert("あなたは次の文字を入力しました: "+this.val());}});
HTMLは普段通り記述し、上で指定したidを付与するだけです。
<input id="id名" type="text">
フォームの入力を限定するjavascript「MaskedInput」サンプル

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:「Web Design Showcase」開設

あなたにはこちもお勧め!

jQuery プラグインまとめ!