JavaScriptで作る、マスク(入力補助)付きテキスト入力

2017年8月30日水曜日

javascript

t f B! P L


ある日突然

WEBサイト制作で、マスク(入力補助)付きの
テキスト入力機能が必要になった。

業務システムに携わっている方ならお馴染みの機能ですが、
マスクとは、テキスト入力を特定の文字種類のみに制約する機能の事を指します。

よるある例で、以下のような郵便番号を入力する項目に使用されたりします。


数値のみに入力が制御され、"-"(ハイフン)はあらかじめ入力されている為、
わざわざ入力する必要がないなど、ユーザビリティが向上する為、
入力項目が大量にある画面では、是非採用したい所です。


WEBサイトで実現する場合は、Jquery.inputmask という 
JQueryのプラグインが有名です。

 (デモサイトの画面イメージ)

上記の通り、「日付・通貨・ナンバープレート・進数・電話番号・IPアドレス・メールアドレス」など、設定次第でかなり色々なマスク設定が出来ます。





 (参考にしたサイト)
 テキスト入力のマスク(入力補助)を作成する

スポンサーリンク

QooQ