支援振る舞い

フィールド上での「入力支援」を使用可能にします。 フィールドがフォーカスされたときに フィールド内にプロンプト文字が表示され、 ユーザーが入力できる場所が示されます。 ユーザーが入力を行うと、ユーザーが入力できる場所にカーソルが置かれるようになります。 ユーザーがその位置に対して無効な文字を入力した場合、その文字は無視されます。

各データ型に対する入力支援の動作について 詳しくは、『JSF 支援』を参照してください。

フィールド上での「入力支援」を使用可能にします。 現在のところ、入力支援では以下のような支援をサポートしています。
  • フィールドがフォーカスされたときに フィールド内にプロンプト文字が表示され、 ユーザーが入力できる場所が示されます。 ユーザーが入力を行うと、ユーザーが入力できる場所にカーソルが置かれるようになります。 ユーザーがその位置に対して無効な文字を入力した場合、その文字は無視されます。 フィールドからフォーカスが外れたときは、 プロンプト文字なしで再フォーマットされます。
  • フィールドが「フル」になると、 次のフィールドにフォーカスが移ります (またはフォームが送信されます)。
  • フィールドがフォーカスされると、IME (入力メソッド・ エディター) の状態が切り替え可能になり、 いくつかのアジア言語の文字を入力するために 使用できるようになります。

プロンプトを使用可能にするには、 コンバーターが提供される必要があります (つまり、 フィールドが数値、日付/時刻またはマスクである必要があります)。 コンバーターが定義するパターン/フォーマットによって、 フィールドでのプロンプトの動作が決まります。 プロンプト文字の処理方法、 入力の制限方法、カーソルの働きなどの 詳細は、『JSF 支援』の セクションで説明しています。

フィールドでの自動タブは、 プロンプトとは個別にオンにすることができます。 フィールドが数値、日付/時刻、文字列のいずれかである場合、 通常はコンバーターが必要となりますが、 自動タブが使用可能なときは必要ありません。 プロンプトと自動タブの両方がオンの場合は、 最後のプロンプト文字 (右端の文字) が入力されたときに、 カーソルが進みます。 プロンプトが使用可能でない場合は、 「最大文字数」が入力されたときに、カーソルが進みます。 この値の計算は、かなり複雑になります。 コンバーターが提供されていない場合は、 最大文字数は自動タブ属性の値として指定してください。 この値が提供されない場合は、 フィールドの最大長 HTML 属性と コンバーター (存在する場合) とが調べられて、 これら 2 つの値を基に「実用的な」値が構成されます。 日付/時刻および数値の場合、 この値はかなり大きくなる場合があります。 例えば、日付/時刻の場合、 入力される可能性のある 最長の「名前」(例えば「December」) が考慮されます。 数値の場合は、負符号や 3 桁区切り文字の 最大使用回数などが考慮されます。 必要な場合は、フィールドの最大長に 関する HTML 属性を調整して、 計算された値が反映されるようにします。

最大文字数が入力されたときにタブを進める代わりに、 自動送信を設定して、自動タブの振る舞いを変更することが できます (自動送信が実行されるように、自動タブを設定する必要があります)。 この場合、最大文字数が入力されると、 そのフィールドを含むフォームが送信されます。 この機能は非推奨です (セクション 508 に準拠していません)。 ページ内で「旧型の」UI パラダイムが使用されているような、 特別な場合にのみ有効です。

IME モード属性が提供されている 場合は、IE における CSS の IME モード・プロパティーと まったく同じ働きをします。 (IE のみ) フィールドがフォーカスされると、IME は 指定された状態 (例えば、使用可能の状態) に設定されます。 CSS を介して IME モード・プロパティーを フィールド上に指定することで、まったく同じことを行えるため、 この機能の使用は推奨されていません。

コンポーネントを発行する JSF タグ

<hx:inputHelperAssist>

基本 HTML

<input type="text"> のみで使用します。

JavaScript™ コンストラクター

各部の意味は次のとおりです。

id

コンポーネントが付加される HTML タグの ID。

属性

コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。

サポートされるイベント

イベント

説明

oninput

特殊なイベント名の使用には注意してください。 この振る舞いにより、 すべてのキーボード・イベント・ハンドラー、 およびフォーカスとぼかしが変更されます。

属性

表 1. 支援振る舞い属性

属性名

説明

converter

構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。

validator

構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。

prompt-char

プロンプト文字として使用する文字 (ユーザーに入力場所を示します)。 スペースも、正当なプロンプト文字になります。 プロンプト文字はパターンによって意味を成すので、注意が必要です。 例えば「.」は、数値に対する適切なプロンプト文字ではありません。 コンバーターが提供されていない場合は、使用されません。

auto-tab

入力可能な最大文字数 (入力場所が存在する場合)。 入力された文字数が最大数に達した場合、 次のフィールドにフォーカスが移ります。 日付/時刻フィールドおよびマスク・フィールドの場合、 値は必要ありません (パターンから計算されます)。 数値の場合、値はオプションです (提供されない場合は、 パターンの最大サイズが使用されます)。 コンバーターが提供されない場合は、 値を提供する必要があります。

auto-submit

フィールドに対して auto-tab が設定されている 場合、auto-tab の振る舞いを、次のフィールドへの移動から、 そのフィールドを含むフォームの送信に変更します。 デフォルトでは、 フォーム内にある最初の送信ボタンを使用して、 送信を実行します。 違うボタンを使用して送信を行うには、 そのボタンの ID を属性の値として指定します。 auto-submit によってフォームの送信方法を 決定する場合の詳細については、SUBMIT アクションを参照してください。

ime-mode

フィールドにフォーカスが あるときに、ime-mode を指定の状態に設定します (ime-mode が提供されている場合)。 IE でのみ機能します。 この属性は非推奨です。CSS を使用して、設定を行ってください。

順序付け

イベント用に指定された他のハンドラーのあとに、実行されます。 イベントを停止します。

API 呼び出し

表 2. 支援振る舞い API 呼び出し

API 呼び出し

説明

object = setAttribute(attribute)

属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。

string = getAttribute(attribute-name)

属性の現行値を取得します。

制限

サンプル・コード

フィールド上で 5 文字入力されると、自動タブを使用可能にします。

hX.addBehavior ("form1:text1", "oninput", new hX.JSFBehaviorAssist("auto-tab:5"));

数値フィールド上で、 プロンプト (プロンプト文字として * を使用) と 自動タブを使用可能にします。

hX.addConverter("2", new hX.NumberConverter( "pattern:US$ ###,##0.00;( US$ ###,##0.00 )"));
hX.addBehavior ("form1:text2", "oninput", new hX.JSFBehaviorAssist("converter:2", "auto-tab", 
                  "prompt-char:*"));

日付/時刻フィールド上で、 プロンプト (プロンプト文字としてスペースを使用) と 自動タブを使用可能にします。 フィールドのバリデーターを含みます。

hX.addConverter("3", new hX.DateTimeConverter("strict:1", "format:MM/dd/yyyy"));
hX.addValidator("C", new hX.DateTimeValidator( "required", "min-bound:20040101120000",  
                  "max-bound:20041001120000"));
hX.addBehavior ("form1:text3", "oninput", new hX.JSFBehaviorAssist("validator:C", 
                  "converter:3", "auto-tab", "prompt-char: "));

フィードバック