InputManJS/JavaScript

JavaScriptでヘルプボタン付きのテキストボックスを作成する

by MESCIUS-dev

便利で快適な入力フォーム開発に特化したJavaScriptライブラリ「InputManJS（インプットマンJS）」の最新バージョン「V4J」では新機能としてテキストやマスクなどの各種コントロールの中に「ヘルプボタン」を追加できるようになりました。マウスオーバーすることでツールチップで任意のテキストを表示できます。

ヘルプボタン

今回はテキストコントロールへのヘルプボタンの追加方法や、マウスオーバー時に表示されるツールチップのスタイルのカスタマイズ方法を解説していきたいと思います。

開発環境

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

テキストコントロールの表示

InputManJSでは以下のコントロールにヘルプボタンを追加することができます。

  • テキストコントロール（GcTextBox）
  • 複数行テキストコントロール（GcMultiLineTextBox）
  • コンボコントロール（GcComboBox）
  • マスクコントロール（GcMask）
  • 日付時刻コントロール（GcDateTime）
  • 数値コントロール（GcNumber）

今回は以下の3つのファイルを用意してテキストコントロールにヘルプボタンを追加してみます。

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

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

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

  • scripts/gc.inputman-js.ja.js
  • css/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.grapecity.com/inputmanjs/hosted/css/gc.inputman-js.css" />
    <script src="https://cdn.grapecity.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>

テキストコントロールの初期化設定

次にテキストコントロールを表示する領域を<input>タグで定義します。今回はID属性に「gcTextBox1」を設定しました。

<!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.grapecity.com/inputmanjs/hosted/css/gc.inputman-js.css" />
    <script src="https://cdn.grapecity.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>
    <input id="gcTextBox1">
</body>

</html>

続いて「scripts/app.js」にテキストコントロールの初期化処理を記載します。今回はformatプロパティに「Ｚ」を、maxLengthプロパティに「8」を設定し、全角文字で8文字までの入力が可能となるように設定しています。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

document.addEventListener('DOMContentLoaded', function () {
    GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

    const gcTextBox1 = new GC.InputMan.GcTextBox(
        document.getElementById('gcTextBox1'),
        {
            format: 'Ｚ',
            maxLength: 8,
        }
    )
});

続いて「css/styles.css」にテキストコントロールのスタイルの設定を記載します。

.gcim {
  width: 180px;
  border-width: 2px;
  margin: 10px 0 0 10px;
}

以上でテキストコントロールを使用する準備は完了です。Visual Studio Code上で「index.html」を右クリックして、「Open with Live Server」を実行します。

Live Serverを実行

実行後、ブラウザ上にテキストコントロールが表示されます。

テキストコントロールの表示

テキストコントロールにヘルプボタンの追加

ここからはテキストコントロールにヘルプボタンを追加する方法を解説します。

ヘルプボタンの追加

ヘルプボタンの追加は初期化時にshowHelpButtonプロパティをtrueに設定し、helpContentプロパティにマウスオーバー時に表示させたいテキストを設定するだけです。

document.addEventListener('DOMContentLoaded', function () {
    GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

    const gcTextBox1 = new GC.InputMan.GcTextBox(
        document.getElementById('gcTextBox1'),
        {
            format: 'Ｚ',
            maxLength: 8,
            showHelpButton: true,
            helpContent: '全角8文字以内で入力してください。',
        }
    )
});

再度Live Serverを実行すると、以下のようにテキストコントロール右端にヘルプボタンが表示されます。

テキストコントロールにヘルプボタンを追加

ヘルプボタンにマウスオーバーすると設定したテキストが表示されます。

ヘルプボタンのスタイル設定

ヘルプボタンのツールチップのスタイルをカスタマイズするにはgcim__help-button_tipクラスを使用します。今回は以下のように「css/styles.css」を追記し、ツールチップの背景色、文字色、罫線のスタイル、フォントの太さをカスタマイズします。

.gcim {
  width: 180px;
  border-width: 2px;
  margin: 10px 0 0 10px;
}

.gcim__help-button_tip {
  background-color: #551F7F;
  color: white;
  border-style: dotted;
  font-weight: bold;
}

再度Live Serverを実行すると、以下のようにヘルプボタンにマウスオーバーした際に、スタイルがカスタマイズされたツールチップが表示されます。

今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回はInputManJSのテキストコントロールへのヘルプボタンの追加方法や、マウスオーバー時に表示されるツールチップのスタイルのカスタマイズ方法を解説しました。InputManJSにはこの他にも便利な機能が多数搭載されていますので、気になった方はデモアプリケーションやトライアル版を是非お試しください。

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

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