InputManJS/InputManJSで仕事が捗る入力フォーム開発/JavaScript

InputManJSで仕事が捗る入力フォーム開発（2）制限して快適な入力を実現するマスク機能

by MESCIUS-dev

2022年8月1日更新

InputManJS（インプットマンJS）は便利で快適な入力フォーム開発に特化したJavaScriptライブラリです。様々な用途に合わせて最適化された同ライブラリのインプットコントロールを活用することにより、入力ストレスの少ないWebフォームを効率的に実現することができます。

このシリーズではInputManJSに収録されている便利な機能やコントロールをピックアップしながら、開発者もシステム利用者も「仕事が捗る」入力フォームの開発TIPSをご紹介します。

制限によって快適になる入力

前回の記事では「フォーム離脱率」をテーマに、その低減に活用できるInputManJSの文字種変換機能をご紹介しました。

アプリケーション開発では度々、機能の柔軟性や自由度の高さといった要素が重視されますが、同機能に見られるように便利で使い勝手の良い入力フォームの開発にあたってはその反対のアプローチ、「出来ることを制限する」というやり方のほうが良い結果を得られる場合があります。

例えばWebフォームに「電話番号」や「年齢」といった入力欄を設置する場合は、無制限に入力を許可するのではなく数字のみを入力できるようにします。こうすることでユーザーにおける入力ミスの可能性が減り、システム側としてもフォーマットの整ったデータを受け取ることができるといったメリットが生まれてきます。

今回は、Webフォームにおける様々な入力シチュエーションにあわせてこのような入力制御ができるInputManJSの「マスクコントロール（GcMask）」をご紹介します。このコントロールで上手に入力を制限すれば、利用者が入力で苦労しない、ストレスフリーなWebフォームを実現することが可能です。

InputManJSのマスクコントロール

InputManJSのマスクコントロールには特徴的な2つの機能が搭載されています。

  • 正規表現を使った入力制御
  • 入力内容を列挙体から選べるスピン機能

以降の項ではそれぞれの機能を詳しく解説します。

正規表現を使った入力制御

マスクコントロール、1つ目の機能は名称の由来にもなっている「入力マスク」機能です。入力マスクとは特殊な文字列式のことで、ユーザーによってコントロールに入力された情報を特定のフォーマットに整形するためのテンプレートのような役割を果たすものになります。

例えば郵便番号の入力を想定する場合、下図のようにして入力マスクとユーザー入力を組み合わせることで、システム側におけるフォーマット処理の手間や、利用者側における入力ミスを減らすことができるようになります。

入力マスクの概念
入力マスクの考え方

InputManJSのマスクコントロールでは正規表現による入力マスク設定が可能になっており、開発する入力フォームの仕様に併せて様々なフォーマットに対応した入力制御を実現することが可能になっています。

例えば上述の郵便番号入力に対するマスクは、formatPatternプロパティと正規表現を使い、次のようにして設定します。

<html>

<head>
    <!--InputManJS関連のCSSとライブラリファイルを参照します-->
    <!--CSSファイル-->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <!--JavaScriptファイル-->
    <script src="js/gc.inputman-js.ja.js"></script>
</head>

<body>
    <p>入力された文字列を全角に自動変換して表示します</p>
    
    <!-- InputManJS マスクコントロールとなるINPUT要素を配置します -->
    <input id="gcMask" />
</body>

</html>
// gcMaskインスタンスを生成します
var imDom = document.getElementById('gcMask');
var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask'));

// 入力マスクを設定します
gcMask.formatPattern = '〒\\D{3}-\\D{4}';

このコードを実行すると以下のような動作を確認することができます。

上記の例では正規表現による文字数や文字種の指定に加えてリテラル文字を使い、コントロール内に〒記号やハイフンを表示していますが、正規表現のみを使用して純粋な入力制御を行うことも可能です。

次に示す例では、正規表現のみを使い「ひらがな以外、入力を5文字まで許可」という入力制御を実現しています。

// gcMaskインスタンスを生成します
var imDom = document.getElementById('gcMask');
var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask'));

// 入力をひらがな以外に制限し、5文字までの入力を許可します
gcMask.formatPattern = '[^\\Ｊ]{0,5}';

なお、上記コードの実行結果は以下のデモでご確認いただけます。



またこのコントロールでは、前回ご紹介した文字種の自動変換機能を有効にすることもできます。

次に示すのは上記のサンプルコードに対して文字種の自動変換機能を有効にする例です。

// gcMaskインスタンスを生成します
var imDom = document.getElementById('gcMask');
var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask'));

// 入力をひらがな以外に制限し、5文字までの入力を許可します
gcMask.formatPattern = '[^\\Ｊ]{0,5}';

// 文字種の自動変換を有効にします
gcMask.setAutoConvert(true);

この場合にひらがなで入力を行うと、入力マスクの設定に合致した文字種に自動変換されます（今回の場合はカタカナに自動変換）。

入力内容を列挙体から選べるスピン機能

上記のほか、InputManJSのマスクコントロールでは「スピン機能」による入力制御が可能です。

この機能を使い、あらかじめリスト化した内容をコントロールに設定することで、ユーザーは所定の内容から入力データを選択できるようになります。

設定は非常に簡単で、この機能でもformatPatternプロパティを利用します。以下のようにしてコントロールに列挙体を設定の上、「スピンボタン」の表示を有効にすることで、コントロール脇のボタンを使ったスピン操作による入力が可能となります。

// gcMaskインスタンスを生成します
var imDom = document.getElementById('gcMask');
var gcMask = new GC.InputMan.GcMask(document.getElementById('gcMask'));

// マスクコントロールに列挙体を設定します
gcMask.formatPattern = '(月曜日|火曜日|水曜日|木曜日|金曜日|土曜日|日曜日)';

// スピンボタンを有効にします
gcMask.addSpinButton();

次に示すのは上記コードの実行結果です。このように、システムが期待する入力値を選択形式で提供することにより、ユーザーにとって入力負担が少なくミスの発生しづらい入力フォームを作ることが可能になります。

なお、この際のスピン操作はコントロール脇のボタン押下によるもののほか、マウスホイールや上下キーでも実現できるようになっています（詳細はこちらをご確認ください）。

さいごに

今回はInputManJSのマスクコントロールをご紹介しました。同コントロールを使い、ユーザーの入力をうまく制御することで入力ストレスの少ないWebフォームを実現することができます。

InputManJSのマスクコントロールには、記事内でご紹介した2つの機能をはじめとして、強力な入力機能がまだまだ搭載されています。その他の機能については弊社のウェブサイトで公開中のデモにてご確認いただけるようになっていますので、ぜひ、こちらもご参照ください。

また弊社Webサイトでは、製品の機能を手軽に体験できるトライアル版も公開しております。より本格的な製品のお試しにあたっては、こちらもご確認いただけますと幸いです。

このほか、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記までお気軽にお問合せください。

＼  この記事をシェアする  ／