Webサイトで使える、マスク入力 (入力補助) ライブラリを自作してみました。
jq-maskinput.js
特徴：
- jQueryのプラグインとして動作
- ウォーターマーク(*1)をCanvasを使って画像として描画
- マスクで指定した文字種で、キーボード入力制御を行う
- ファイルサイズが約9KBの軽量ライブラリ
*1： _ (アンダースコア) などの入力補助用の文字
使い方：
script タグにjQueryとプラグイン (jq-maskinput.js)を指定
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="jq-maskinput.js"></script>
マスク入力を行うテキストボックスを配置
<input type="text" class="mask" data-mask-format="###-####" />
ロード時に、プラグイン関数を呼び出す
<script>
$(function() {
$(".mask").maskInput();
});
</script>
実行結果：
マスク書式：
デモページ
◎ 日付
◎ 数字
◎ 英字(大文字のみ)
◎ 英字(小文字のみ)
マスク書式：
| 年 | yyyy |
| 月 | MM |
| 日 | dd |
| 英字(大文字) | A |
| 英字(小文字) | a |
| 数字 | # |
デモページ
◎ 日付
<input type="text" class="mask" data-mask-format="yyyy/MM/dd" />
◎ 数字
<input type="text" class="mask" data-mask-format="#####" />
◎ 英字(大文字のみ)
<input type="text" class="mask" data-mask-format="AAAA" />
◎ 英字(小文字のみ)
<input type="text" class="mask" data-mask-format="aaaa" />
0 件のコメント:
コメントを投稿