TextInputは、テキスト(単一行)の入力フィールドを表示する部品です。
ポイント
検証を実行するValidationHelper、入力制限を行うLimiterなどの機能付加部品を利用することができます。
表示例
本部品では、Ctrlキー + z が使用できます。詳細は、「5.1.7 テキスト入力部品でのCtrlキー+zによるやり直し」を参照してください。
記述形式
<div rcf:type="TextInput" ... ></div>
または
<span rcf:type="TextInput" ... ></span>
注意
子要素は指定できません。詳細は、「5.1.4 子要素を持たない部品に子要素を記述した場合の動作」を参照してください。
ポイント
本部品は以下のように表示されます。
<div>タグの場合:前後に改行コードが挿入されます。
<span>タグの場合:前後に改行コードは挿入されません。
プロパティ
表の項目の意味は、「Text」の「プロパティ」を参照してください。
名前 | データ型 | 説明 | 省略 | 省略値 | 属性指定 | 更新 | 部分更新 |
|---|---|---|---|---|---|---|---|
value | String | テキストを指定します。 | 可 | "" | 値、バインド | 可 | 不可 |
title | String | ツールチップで表示されるテキストを指定します。 | 可 | "" | 値 | 可 | 不可 |
labelProvider | getLabel関数を持つオブジェクト | テキストを表示するときに、フォーマットするためのオブジェクトを指定します。getLabel関数を持たないオブジェクトが指定された場合、エラーになります。「フォーマッタについて」を参照してください。 | 可 | null | 値 | 可 | 不可 |
enabled | Boolean | 本部品の有効/無効を指定します。
| 可 | true | 値、バインド | 可 | 不可 |
readOnly | Boolean | 書込み禁止/許可を指定します。
| 可 | false | 値、バインド | 可 | 不可 |
password | Boolean | パスワードを入力する形式にするかどうかを指定します。表示後に変更することはできません。
| 可 | false | 値 | 不可 | 不可 |
maxLength | Number | 最大文字数を指定します。2バイト文字も1文字と数えます。本プロパティを指定したあとに、「指定なし」の状態に戻すことはできません。
「5.1.2 サロゲートペア」を参照してください。 | 可 | 指定なし(-1) | 値 | 可 | 不可 |
autoEscape | Boolean | 自動脱出機能の有効/無効を指定します。
| 可 | false | 値 | 可 | 不可 |
tabIndex | Number | Tabキーで移動するフォーカスの順番を指定します。 | 可 | 0 | 値 | 可 | 不可 |
uppercase | Boolean | 半角および全角の英文字を大文字にするかどうかを指定します。表示後に変更することはできません。
| 可 | false | 値 | 不可 | 不可 |
imeMode | String | IMEのモードを指定します。以下の値以外が指定された場合は、無視されます。
| 可 | auto | 値、バインド | 可 | 不可 |
部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。
注意
titleプロパティに長い文字列を指定すると、自動的に改行または省略されることがあります。
また、発生位置はブラウザにより異なります。
なお、空文字列を指定した場合は、表示されません。
ポイント
maxLengthプロパティを指定してIMEで入力したときの動作について、以下に示します。
Internet Explorerの場合
変換前の文字列が存在する場合、maxLengthプロパティで指定した文字数に達した段階で強制的に文字列が確定します。
Firefoxの場合
変換前の文字列が存在する場合、maxLengthプロパティで指定された文字数以上の文字列が入力できます。ただし、変換が確定した時点で、maxLengthプロパティに指定された文字数以上の文字列は無視されます。
自動脱出機能を有効にするには、以下の条件を満たす必要があります。
autoEscapeプロパティにtrueが指定されていること
maxLengthプロパティに最大文字数を指定してあること
本部品がFocusManagerの対象となっており、FocusManagerに次のフォーカスの移動先が指定されていること
imeModeプロパティに「disabled」が指定されていること
画面の初期化時に、valueプロパティの値が表示されるときの処理順序を以下に示します。
文字列が大文字に変換されます。(uppercaseプロパティがtrueの場合)
フォーマッタ処理が実行されます。(labelProviderプロパティが指定されている場合)
本部品へのフォーカスの有無によって、以下のようにフォーマットされます。
フォーカスがない場合
labelProviderプロパティで指定されたオブジェクトによってフォーマットされたvalueプロパティの値が表示されます。
フォーカスがある場合
valueプロパティに指定された値が表示されます。
フォーマッタの指定方法は、「フォーマッタの指定方法」を参照してください。
スタイルプロパティ
パーツ名 | プレフィックス | クラス名 | 使用可能なスタイル |
|---|---|---|---|
部品全体 | なし | rcf-TextInput |
|
注) Firefoxの場合は、wordSpacingも除きます。
詳細は、「2.9 スタイルプロパティ」を参照してください。
イベントリスナ
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onFocus | 部品がフォーカスを得たときに呼ばれます。 | |
onBlur | 部品がフォーカスを失ったときに呼ばれます。 | |
onChange | 部品がフォーカスを失い、かつ値が変更されたときに呼ばれます。 | |
onValueChange | 値が入力され、かつ値が変更されたときに呼ばれます。 |
部品共通のイベントリスナもあります。部品共通のイベントリスナは、「2.8.2 画面部品共通イベントリスナ」を参照してください。
JavaScript API
固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。
補足事項
TextInputがフォーカスを得たとき、Internet ExplorerとFirefoxでは動作に違いがあります。
Internet Explorerの場合
常に入力テキストが選択状態になります。
Firefoxの場合
TABキーによるブラウザのデフォルトのフォーカス移動によりフォーカスを得た場合は、入力テキストが選択状態になります。
マウスクリックによりフォーカスを得た場合は、クリックした位置にカーソルが移動します。
FocusManagerによるフォーカス移動によりフォーカスを得た場合は、入力テキストは選択状態にはならず、カーソルが表示されます。
