Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Webページのフォームをより便利に! 軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

InputManJSの機能で入力フォームをカスタマイズ

 InputManJSをカスタマイズできる設定の概要を以下で説明します。書式設定で指定できるパラメーターの種類など、詳細は公式ページを参照してください。

書式の設定

 コントロールに書式を設定する方法を、図4のサンプル(P002-format)で説明します。

図4 書式設定のサンプル(P002-format)
図4 書式設定のサンプル(P002-format)

 テキストコントロールでは、入力できる文字の種類をsetFormatメソッドで指定します。

リスト4 テキストコントロールの書式設定(P002-format/main.js)
gcTextBox1.setFormat('A9'); // A:半角大文字アルファベット、9:半角数字
gcTextBox2.setFormat('J'); // 全角のJ:ひらがな

 この場合、指定外の文字は入力できなくなりますが、大文字/小文字、半角/全角などは自動変換されます。

図5 入力された文字が自動変換される様子(P002-format)
図5 入力された文字が自動変換される様子(P002-format)

 マスクコントロールでは、setFormatPatternメソッドの引数に正規表現で書式を指定します。一般的な正規表現のほか、「\\A」(全角大文字アルファベット)、「\\a」(半角小文字アルファベット)、「\\D」(半角数字)といった指定もできます。

リスト5 マスクコントロールの書式設定(P002-format/main.js)
// 全角大文字アルファベット0文字以上
gcMask1.setFormatPattern('\\A*');
// 半角の小文字アルファベットか数字が2~4文字 ...(1)
gcMask2.setFormatPattern('[\\a\\D]{2,4}');

 リスト5(1)のように文字数を制限すると、最小文字数に対応する下線が表示されて、利用者の入力をガイドします。

図6 マスクコントロールの入力ガイド(P002-format)
図6 マスクコントロールの入力ガイド(P002-format)

 日付時刻コントロールでは、入力時の書式をsetFormatPatternメソッド、表示時の書式をsetDisplayFormatPatternメソッドに指定します。

リスト6 日付時刻コントロールの書式設定(P002-format/main.js)
gcDateTime1.setFormatPattern('yyyyMMdd'); // 入力時の書式
gcDateTime1.setDisplayFormatPattern('gggEE年MM月dd日'); // 表示時の書式

 リスト6の日付時刻コントロールは、図7のように表示されます。

図7 書式を設定した日付時刻コントロール(P002-format)
図7 書式を設定した日付時刻コントロール(P002-format)

 書式設定では、表2のように元号や和暦も指定できます。和暦の「E」や「EE」は、「平成元年」のように表示するための指定です。

表2 元号や和暦の書式設定
キーワード 説明
g アルファベットの元号(M、T、S,H)
gg 元号の頭文字(明、大、昭、平)
ggg 元号(明治、大正、昭和、平成)
e 和暦(0詰めなし)
ee 和暦(2桁になるように0詰め)
E 和暦(0詰めなし、開始年を「元」と表示)※表示時のみ
EE 和暦(2桁になるように0詰め、開始年を「元」と表示)※表示時のみ

 入力時の書式に元号を指定した場合、表3の入力ショートカットが利用できます。

表3 元号の入力ショートカット
入力ショートカットの種類 明治 大正 昭和 平成
数字入力 1 2 3 4
英字入力 m t s h

 入力ショートカットを利用すると、図8のように元号を入力できます。

図8 入力ショートカットを利用した元号の入力(P002-format)
図8 入力ショートカットを利用した元号の入力(P002-format)

 数値コントロールでは、リスト7のように、入力時と表示時で個別に書式を設定できます。(1)は数値の書式設定で、入力時は指定なし(入力値をそのまま表示)、表示時は数値がカンマ区切りになります。(2)は接頭辞の設定で、入力時と表示時、値が正のときと負のときで別の設定ができます。接尾辞の設定も同様です(サンプルコード参照)。

リスト7 数値コントロールの書式設定(P002-format/main.js)
// 数値コントロールの書式設定(数値書式) ...(1)
gcNumber1.setFormatDigit(''); // 入力時(指定なし)
gcNumber1.setDisplayFormatDigit('###,##0'); // 表示時(カンマ区切り)
// 数値コントロールの書式設定(接頭辞) ...(2)
gcNumber1.setPositivePrefix('+'); // 入力時・正値
gcNumber1.setDisplayPositivePrefix('貯金:'); // 表示時・正値
gcNumber1.setNegativePrefix('-'); // 入力時・負値
gcNumber1.setDisplayNegativePrefix('貯金:▲'); // 表示時・負値
(略:接尾辞の書式設定)

 リスト7の表示結果は図9のようになります。

図9 リスト7の書式を設定した数値コントロール(P002-format)
図9 リスト7の書式を設定した数値コントロール(P002-format)

 カレンダーコントロールでは、リスト8のように書式を設定できます。

リスト8 カレンダーコントロールの書式設定(P002-format/main.js)
gcCalendar1.setHeaderFormat('ggge年 M月') // ヘッダー書式 ...(1)
gcCalendar1.setYearMonthFormat('ggge年,MM月'); // 年-月カレンダー書式 ...(2)

 カレンダーコントロールでは、カレンダー上部のボタンで、月-日カレンダー(図10=左)と年-月カレンダー(図10=右)を切り替えて表示できます。(1)は月-日カレンダーのヘッダー、(2)は年-月カレンダーのヘッダーと、月表示の書式を指定します。

図10 リスト8の書式を設定したカレンダーコントロール(P002-format)
図10 リスト8の書式を設定したカレンダーコントロール(P002-format)

フォーカス移動

 コントロールのフォーカス移動設定を、図11のサンプルで説明します。このサンプルでは、テキストボックスに4文字入力したときに自動でフォーカス移動します。また、矢印キーの左右でフォーカスを前後に移動できます。

図11 フォーカス移動のサンプル(P003-focus)
図11 フォーカス移動のサンプル(P003-focus)

 このサンプルでは、各テキストボックスにリスト9のように設定しています。

リスト9 フォーカス移動の設定(P003-focus/main.js)
// 最大文字数を4に設定 ...(1)
gcTextBox1.setMaxLength(4);
// 入力完了後にフォーカス移動 ...(2)
gcTextBox1.setExitOnLastChar(true); 
// 左右キーでフォーカス移動 ...(3)
gcTextBox1.setExitOnLeftRightKey(GC.InputMan.ExitOnLeftRightKey.Both);

 (1)で最大文字数を4にしたテキストボックスに、(2)のsetExitOnLastCharメソッドで入力完了後のフォーカス移動を設定しています。(3)のsetExitOnLeftRightKeyは、左右キー押下時の挙動を指定するメソッドで、Both(左右ともフォーカス移動)のほか、Left(左のみ)、Right(右のみ)、None(フォーカス移動なし)が指定できます。

ドロップダウン表示

 日付時刻コントロールと数値コントロールには、入力を支援するドロップダウンが表示できます。図12のサンプルでは、各コントロールの右側に表示される▼ボタンを押すと、カレンダーやテンキーがドロップダウン表示されます。

図12 ドロップダウン表示のサンプル(P004-dropdown)
図12 ドロップダウン表示のサンプル(P004-dropdown)

 ドロップダウンを表示するには、リスト10のように指定します。

リスト10 ドロップダウン表示の設定(P004-dropdown/main.js)
gcDateTime1.addDropDownCalendar(); // 日付時刻コントロールのドロップダウン設定
gcNumber1.addDropDownNumericPad(); // 数値コントロールのドロップダウン設定

フリガナ

 InputManJSのテキストコントロールでは、入力時にフリガナを取得できます。図13のサンプルでは、上のテキストコントロールに漢字入力すると、対応するフリガナが下のテキストコントロールに反映されます。

図13 フリガナのサンプル(P005-furigana)
図13 フリガナのサンプル(P005-furigana)

 実装はリスト11のようになります。

リスト11 フリガナを取得する実装(P005-furigana/main.js)
// フリガナの取得 ...(1)
gcTextBox1.onIMEReadingStringOutput(function(sender, eArgs) {
  furigana.setText(furigana.getText() + eArgs.readingString);
});
// フリガナを全角カタカナに設定 ...(2)
gcTextBox1.setReadingImeStringKanaMode(GC.InputMan.KanaMode.Katakana);
// 前に取得されたフリガナを置き換える設定 ...(3)
gcTextBox1.setIMEReadingStringAppend(false);

 (1)で、onIMEReadingStringOutputイベントハンドラーに渡される引数eArgsのreadingStringプロパティからフリガナを取得します。(2)のsetReadingImeStringKanaModeメソッドでフリガナの種類を設定します。Katakana(全角カタカナ)のほか、KatakanaHalf(半角カタカナ)、Hiragana(全角ひらがな)が指定できます。(3)は、前に取得されたフリガナを置き換えて、新たに入力されたフリガナだけを取得する設定です。

休日・休業日の設定

 カレンダーコントロールには、休日や休業日が設定できます。ここでは毎週日曜日と第2/4土曜日を休業日に設定して赤色や青色で表示する、図14のサンプルを説明します。

図14 休業日設定のサンプル(P006-customdate)
図14 休業日設定のサンプル(P006-customdate)

 休業日を設定する実装はリスト12のようになります。

リスト12 休業日を設定する実装(P006-customdate/main.js)
// 毎週日曜日を休業日に設定 ...(1)
gcCalendar1.getWeekday('sunday').setWeekFlags(GC.InputMan.WeekFlags.All);
// 毎週第2/4土曜日を休業日に設定 ...(2)
gcCalendar1.getWeekday('saturday').setWeekFlags(
  GC.InputMan.WeekFlags.Second | GC.InputMan.WeekFlags.Fourth);

 (1)で、カレンダーコントロールのgetWeekdayメソッドに「sunday」を指定して、setWeekFlagsメソッドで「All」(=毎週)を設定して休業日にします。(2)では、土曜日に対して「Second」と「Fourth」を設定して、第2・4土曜日を休業日にします。なお、設定した休業日の文字色などは、リスト13のようにCSSで指定します。

リスト13 休業日のスタイル指定(P006-customdate/index.css)
/* 日曜のスタイル */
.gcim-calendar__weekday_sunday {
  color: red;
}
/* 土曜のスタイル */
.gcim-calendar__weekday_saturday {
  color: blue;
}

 また、カレンダーに祝日を設定することもできます。詳細は公式ページを参照してください。

新元号対応

 InputManJSではデフォルトで明治から平成までの元号が利用できますが、GC.InputMan.updateCustomEraメソッドで新元号を設定することもできます。

リスト14 元号の設定(P006-customdate/main.js)
GC.InputMan.updateCustomEra([
  { name: '明治', abbreviation: '明', symbol: 'M', startDate: '1868/09/08', shortcuts: '1,M' },
(略)
  // 2019年5月1日からの新元号を「安藤」と仮定
  { name: '安藤', abbreviation: '安', symbol: 'A', startDate: '2019/05/01', shortcuts: '5,A' }
]);

 メソッドの引数に与えるJavaScriptオブジェクト配列で、各元号の名前(name)、頭文字(abbreviation)、アルファベット(symbol)、開始日(startDate)、入力ショートカット(shortcuts)を指定します。ここでは新元号を「安藤」と仮定しています。

 リスト14の設定で、InputManJSは2019年5月1日以降を新元号「安藤」として処理します。日付時刻コントロールでは図15のように新元号を表示できます。表2の書式設定「E」や「EE」で、新元号の最初の年を「元年」と表示させることができます。

図15 日付時刻コントロールに新元号を表示(P006-customdate)
図15 日付時刻コントロールに新元号を表示(P006-customdate)

 カレンダーコントロールの表示は図16のようになります。なお、現状のカレンダーコントロールでは、「元年」を表示する「E」や「EE」の書式は利用できません。

図16 カレンダーコントロールに新元号を表示(P006-customdate)
図16 カレンダーコントロールに新元号を表示(P006-customdate)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5