マスク入力 (入力補助) JavaScriptライブラリ (自作)

2017年9月6日水曜日

javascript 自作

t f B! P L


Webサイトで使える、マスク入力 (入力補助) ライブラリを自作してみました。

jq-maskinput.js

ダウンロードはこちらから。

特徴:
  1. jQueryのプラグインとして動作
  2. ウォーターマーク(*1)をCanvasを使って画像として描画
  3. マスクで指定した文字種で、キーボード入力制御を行う
  4. ファイルサイズが約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="###-####" />
 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" />



スポンサーリンク

QooQ