新元号対応Page3【実用例】ホテル予約フォームまとめ参考資料InputManJSの機能で入力フォームをカスタマイズInputManJSをカスタマイズできる設定の概要を以下で説明します。書式設定で指定できるパラメーターの種類など、詳細は公式ページを参照してください。書式の設定コントロールに書式を設定する方法を、図4のサンプル(P002-format)で説明します。書式設定のサンプル(P002-format)テキストコントロールでは、入力できる文字の種類をsetFormatメソッドで指定します。全角のJ:ひらがなこの場合、指定外の文字は入力できなくなりますが、大文字/小文字、半角/全角などは自動変換されます。入力された文字が自動変換される様子(P002-format)マスクコントロールでは、setFormatPatternメソッドの引数に正規表現で書式を指定します。一般的な正規表現のほか、「\\A」(全角大文字アルファベット)、「\\a」(半角小文字アルファベット)、「\\D」(半角数字)といった指定もできます。...(1)gcMask2.setFormatPattern('[\\a\\D]{2,4}');リスト5(1)のように文字数を制限すると、最小文字数に対応する下線が表示されて、利用者の入力をガイドします。マスクコントロールの入力ガイド(P002-format)日付時刻コントロールでは、入力時の書式をsetFormatPatternメソッド、表示時の書式をsetDisplayFormatPatternメソッドに指定します。表示時の書式リスト6の日付時刻コントロールは、図7のように表示されます。書式を設定した日付時刻コントロール(P002-format)書式設定では、表2のように元号や和暦も指定できます。和暦の「E」や「EE」は、「平成元年」のように表示するための指定です。和暦(2桁になるように0詰め、開始年を「元」と表示)※表示時のみ入力時の書式に元号を指定した場合、表3の入力ショートカットが利用できます。h入力ショートカットを利用すると、図8のように元号を入力できます。入力ショートカットを利用した元号の入力(P002-format)数値コントロールでは、リスト7のように、入力時と表示時で個別に書式を設定できます。(1)は数値の書式設定で、入力時は指定なし(入力値をそのまま表示)、表示時は数値がカンマ区切りになります。(2)は接頭辞の設定で、入力時と表示時、値が正のときと負のときで別の設定ができます。接尾辞の設定も同様です(サンプルコード参照)。表示時・負値(略:接尾辞の書式設定)リスト7の表示結果は図9のようになります。リスト7の書式を設定した数値コントロール(P002-format)カレンダーコントロールでは、リスト8のように書式を設定できます。...(2)カレンダーコントロールでは、カレンダー上部のボタンで、月-日カレンダー(図10=左)と年-月カレンダー(図10=右)を切り替えて表示できます。(1)は月-日カレンダーのヘッダー、(2)は年-月カレンダーのヘッダーと、月表示の書式を指定します。リスト8の書式を設定したカレンダーコントロール(P002-format)フォーカス移動コントロールのフォーカス移動設定を、図11のサンプルで説明します。このサンプルでは、テキストボックスに4文字入力したときに自動でフォーカス移動します。矢印キーの左右でフォーカスを前後に移動できます。フォーカス移動のサンプル(P003-focus)このサンプルでは、各テキストボックスにリスト9のように設定しています。...(3)gcTextBox1.setExitOnLeftRightKey(GC.InputMan.ExitOnLeftRightKey.Both);(1)で最大文字数を4にしたテキストボックスに、(2)のsetExitOnLastCharメソッドで入力完了後のフォーカス移動を設定しています。(3)のsetExitOnLeftRightKeyは、左右キー押下時の挙動を指定するメソッドで、Both(左右ともフォーカス移動)のほか、Left(左のみ)、Right(右のみ)、None(フォーカス移動なし)が指定できます。日付時刻コントロールと数値コントロールには、入力を支援するドロップダウンが表示できます。図12のサンプルでは、各コントロールの右側に表示される▼ボタンを押すと、カレンダーやテンキーがドロップダウン表示されます。ドロップダウン表示のサンプル(P004-dropdown)ドロップダウンを表示するには、リスト10のように指定します。数値コントロールのドロップダウン設定フリガナInputManJSのテキストコントロールでは、入力時にフリガナを取得できます。図13のサンプルでは、上のテキストコントロールに漢字入力すると、対応するフリガナが下のテキストコントロールに反映されます。フリガナのサンプル(P005-furigana)実装はリスト11のようになります。...(3)gcTextBox1.setIMEReadingStringAppend(false);(1)で、onIMEReadingStringOutputイベントハンドラーに渡される引数eArgsのreadingStringプロパティからフリガナを取得します。(2)のsetReadingImeStringKanaModeメソッドでフリガナの種類を設定します。Katakana(全角カタカナ)のほか、KatakanaHalf(半角カタカナ)、Hiragana(全角ひらがな)が指定できます。(3)は、前に取得されたフリガナを置き換えて、新たに入力されたフリガナだけを取得する設定です。休日・休業日の設定カレンダーコントロールには、休日や休業日が設定できます。ここでは毎週日曜日と第2/4土曜日を休業日に設定して赤色や青色で表示する、図14のサンプルを説明します。休業日設定のサンプル(P006-customdate)休業日を設定する実装はリスト12のようになります。GC.InputMan.WeekFlags.Fourth);(1)で、カレンダーコントロールのgetWeekdayメソッドに「sunday」を指定して、setWeekFlagsメソッドで「All」(=毎週)を設定して休業日にします。(2)では、土曜日に対して「Second」と「Fourth」を設定して、第2・4土曜日を休業日にします。設定した休業日の文字色などは、リスト13のようにCSSで指定します。blue;}また、カレンダーに祝日を設定することもできます。詳細は公式ページを参照してください。新元号対応InputManJSではデフォルトで明治から平成までの元号が利用できますが、GC.InputMan.updateCustomEraメソッドで新元号を設定することもできます。}]);メソッドの引数に与えるJavaScriptオブジェクト配列で、各元号の名前(name)、頭文字(abbreviation)、アルファベット(symbol)、開始日(startDate)、入力ショートカット(shortcuts)を指定します。ここでは新元号を「安藤」と仮定しています。リスト14の設定で、InputManJSは2019年5月1日以降を新元号「安藤」として処理します。日付時刻コントロールでは図15のように新元号を表示できます。表2の書式設定「E」や「EE」で、新元号の最初の年を「元年」と表示させることができます。日付時刻コントロールに新元号を表示(P006-customdate)カレンダーコントロールの表示は図16のようになります。現状のカレンダーコントロールでは、「元年」を表示する「E」や「EE」の書式は利用できません。