InputManJS/JavaScript

InputManJSで高機能なフローティングラベルを手軽に組み込む！

by MESCIUS-dev

便利で快適な入力フォーム開発に特化したJavaScriptライブラリ「InputManJS（インプットマンJS）」の最新バージョン「V4.1J」ではフローティングラベル機能が追加されています。

本記事では、InputManJSに含まれているGcTextBoxコントロールを例にして、フローティングラベルの機能や使い方について解説します。

フローティングラベルとは

フローティングラベルは、コントロールに入力すべき内容をキャプションとして明示したいときに使用します。

フローティングラベルの文字列は、コントロールの外側や境界線上または内側（入力領域内）に表示でき、また、コントロールにフォーカスがなく未入力のときは、入力領域に表示され、代替テキストとしても利用できます。この場合、編集が開始されたときや文字列が入力済みのときにはテキストは指定位置に移動します。

例えば、テキストコントロールに「名前」という文字列をフローティングラベルとして設定すると、フォーカスが未設定で未入力のときには下のように表示されます。

フローティングラベル（入力前）

コントロールで入力を開始すると、ラベルテキストの「名前」は次のように移動します。ここでは移動先として「境界線上」を指定しています。

フォーカスがない未入力状態のときに代替となるテキスト（ウォーターマーク）を表示する機能としてWatermarkDisplayNullTextプロパティがありますが、フローティングラベルはその機能を拡張したものといえます。
※ フローティングラベルとウォーターマークの両方を設定した場合、それぞれのテキストが重なる可能性があります。

フローティングラベルに対応したコントロール

InputManJSでフローティングラベルを設定できるのは、文字列を入力できる次の6種類のコントロールです。

これらのコントロールには、フローティングラベルを制御するために次の3つのプロパティが用意されています。

  • floatingLabelDirectionプロパティ
  • floatingLabelTextプロパティ
  • floatingLabelTypeプロパティ

上記プロパティの詳細については後述いたします。

フローティングラベルをコントロールに組み込む

それでは、コントロールにフローティングラベルを設定してみましょう。ここでは、InputManJSのGcTextBoxコントロールにフローティングラベルを設定する方法を紹介します。

開発環境

今回は開発環境として以下を使用します。

事前準備

今回は以下の3つのファイルを用意してフローティングラベルの使い方を解説していきます。

index.htmlページ本体。このページの要素としてInputManJSのテキストボックスコントロールを組み込みます
app.jsInputManJSのテキストボックスコントロールの初期化など各種設定を行うためのコードを記載します
styles.cssInputManJSのテキストボックスコントロールのスタイル設定を行うためのコードを記載します

また、InputManJSの使用にはInputManJSのモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接InputManJSのモジュールを配置していきます。あらかじめInputManJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

  • scripts/gc.inputman-js.ja.js
  • styles/gc.inputman-js.css

コピーしたファイルはそれぞれ以下のように配置します。

コピーしたファイルの配置場所

InputManJSの参照

まずはInputManJSのコントロールを使うのに必要なライブラリの参照設定をHTMLファイルに追加します。InputManJSのモジュールのほか、InputManJSのコントロールの各種処理を記載する「app.js」への参照も追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>InputManJSフローティングラベルサンプル</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <script src="scripts/gc.inputman-js.ja.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!--
    <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css" />
    <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script>
    -->

    <link rel="stylesheet" href="css/styles.css" />
    <script src="scripts/app.js"></script>
</head>

<body>
</body>

</html>

フローティングラベルの設定

以下の「index.html」ファイルの「id="gcTextBox"」のinputタグにGcTextBoxコントロールが組み込まれます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>InputManJSフローティングラベルサンプル</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <script src="scripts/gc.inputman-js.ja.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!--
    <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css" />
    <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script>
    -->

    <link rel="stylesheet" href="css/styles.css" />
    <script src="scripts/app.js"></script>
</head>

<body>
    <div class="control">
        <input id="gcTextBox">
    </div>
</body>
</html>

「app.js」ファイルでは、上記の「id="gcTextBox"」が設定されたinputタグに対応したGcTextBoxコントロールを生成しています。まずは「floatingLabelDirection」を「Outside」に設定し、コントロールのフォーカスが設定されたときに外側にラベルテキストが移動するようにしています。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

// ライセンスキーの設定
GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

document.addEventListener('DOMContentLoaded', () => {
    // GcTextBoxコントロールの設定
    const gcTextBox = new GC.InputMan.GcTextBox(
        document.querySelector('#gcTextBox'),
        {
            floatingLabelText: '名前',
            floatingLabelDirection: 'Outside',
        }
    );
});

実行すると以下のようにコントロールにフォーカスを設定するとラベルテキストがコントロールの外側に移動します。

フローティングラベルで設定可能なオプション

フローティングラベルでは次の3つのプロパティが利用可能です。

プロパティ説明
floatingLabelDirection編集開始時にフローティングラベルを移動する位置
floatingLabelTextフローティングラベルに表示するラベルテキスト
floatingLabelTypeフローティングラベルの表示方法

floatingLabelDirectionプロパティに設定できるFloatingLabelDirection 列挙型には次の3つの種類があります。

列挙型メンバー説明
Insideフローティングラベルをコントロール境界線の内側へ移動
Outsideフローティングラベルをコントロール境界線の外側へ移動
ThroughBorderフローティングラベルをコントロールの境界線上へ移動

floatingLabelTypeプロパティでは、FloatingLabelType 列挙型の次のメンバーを設定することができます。ラベルテキストをアニメーションさせるには「Auto」に設定する必要がありますが、本プロパティのデフォルト値は「Auto」なので、ラベルテキストを固定で表示したいなど、デフォルトの動作を変更したい場合に使用します。

列挙型メンバー説明
Alwaysフローティングラベルを常に指定位置に表示
Auto編集開始時にフローティングラベルを指定位置へ移動
Noneフローティングラベルを表示しない

「index.html」と「app.js」をそれぞれ以下のように追記し、各種オプションをラジオボタンで切り替えができるように設定します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>InputManJSフローティングラベルサンプル</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <script src="scripts/gc.inputman-js.ja.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!--
    <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css" />
    <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script>
    -->

    <link rel="stylesheet" href="css/styles.css" />
    <script src="scripts/app.js"></script>
</head>

<body>
    <div class="control">
        <input id="gcTextBox" class="custom">
    </div>
    <br>
    <fieldset>
        <legend>ラベルの位置</legend>
        <label><input type="radio" id="out" name="LabelDirection" value="Outside" checked>外側</label>
        <label><input type="radio" id="through" name="LabelDirection" value="ThroughBorder">境界線上</label>
        <label><input type="radio" id="in" name="LabelDirection" value="Inside">内側</label>
    </fieldset><br>
    <fieldset>
        <legend>ラベルの表示方法</legend>
        <label><input type="radio" id="auto" name="LabelType" value="Auto" checked>自動</label>
        <label><input type="radio" id="always" name="LabelType" value="Always">常時</label>
        <label><input type="radio" id="none" name="LabelType" value="None">非表示</label>
    </fieldset>
</body>
</html>

// ライセンスキーの設定
GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

document.addEventListener('DOMContentLoaded', () => {
    // GcTextBoxコントロールの設定
    const gcTextBox = new GC.InputMan.GcTextBox(
        document.querySelector('#gcTextBox'),
        {
            floatingLabelText: '名前',
            floatingLabelDirection: 'Outside',
            floatingLabelType: 'Auto'
        }
    );

    // ラベル位置の変更
    document.querySelector('#out').addEventListener('click', () => {
        // 外側
        gcTextBox.floatingLabelDirection = 'Outside';
    });

    document.querySelector('#through').addEventListener('click', () => {
        // 境界線上
        gcTextBox.floatingLabelDirection = 'ThroughBorder';
    });

    document.querySelector('#in').addEventListener('click', () => {
        // 内側
        gcTextBox.floatingLabelDirection = 'Inside';
    });

    // ラベル表示方法の変更
    document.querySelector('#auto').addEventListener('click', () => {
        // 自動
        gcTextBox.floatingLabelType = 'Auto';
    });

    document.querySelector('#always').addEventListener('click', () => {
        // 常時
        gcTextBox.floatingLabelType = 'Always';
    });

    document.querySelector('#none').addEventListener('click', () => {
        // 非表示
        gcTextBox.floatingLabelType = 'None';
    });

});

また、フローティングラベルのスタイルは、CSSを使って状態ごとに指定することができます。ここでは、非編集時にコントロールの編集領域に表示する文字色を「gray」にし、編集開始時や常時表示のときの文字色とフォントサイズをfloatingLabelDirectionプロパティの設定値に応じて切り替えています。

「.custom」は、GcTextBoxコントロールの元になるDOM要素であるinputタグのclass属性です。この指定をしない場合には、ページ上にある編集可能なすべてのInputManJSコントロールのフローティングラベルにそのスタイルが適用されます。

body {
    margin: 20px 0 0 20px;
}

.custom .gcim-floating-label__container[label-state='display'] {
    color: gray;
}
.custom .gcim-floating-label__container[label-state='floating'][label-direction='outside']  {
    color: red;
    font-size: 15pt;
}
.custom .gcim-floating-label__container[label-state='floating'][label-direction='throughborder']  {
    color: green;
    font-size: 15pt;
}
.custom .gcim-floating-label__container[label-state='floating'][label-direction='inside']  {
    color: blue;
    font-size: 12pt;
}

フローティングラベルのCSS設定については、デモの「styles.css」タブの内容もご参考にしていただければと思います。

下の動画では、上記で作成したアプリケーションでフローティングラベルが変化する様子をご確認いただけます。

今回ご紹介したGcTextBoxのフローティングラベル機能は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回はInputManJSのフローティングラベルの機能と使用方法について解説しました。

InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーのきめ細かい入力フォームの開発に、ぜひInputManJSをご検討いただければと思います。

製品サイトでは、InputManJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

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