Ajaxフレームワーク UI部品リファレンス

2.1.2 TextInput

TextInputは、テキスト(単一行)の入力フィールドを表示する部品です。

• 表示例
• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API
• 補足事項

検証を実行するValidationHelper、入力制限を行うLimiterなどの機能付加部品を利用することができます。

■表示例

■記述形式

<div rcf:type="TextInput" ... ></div>

または

<span rcf:type="TextInput" ... ></span>

子要素は指定できません。

本部品は以下のように表示されます。

• <div>タグの場合:前後に改行コードが挿入されます。
• <span>タグの場合:前後に改行コードは挿入されません。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
value	String	テキストを指定します。 “初期化時の処理順序”を参照してください。	可	""	値、バインド	可	不可
title	String	ツールチップで表示されるテキストを指定します。	可	""	値	可	不可
labelProvider	getLabel関数を持つオブジェクト	テキストを表示するときに、フォーマットするためのオブジェクトを指定します。 getLabel関数を持たないオブジェクトが指定された場合、エラーになります。 “フォーマッタについて”を参照してください。	可	null	値	可	不可
enabled	Boolean	本部品の有効/無効を指定します。 true:有効 false:無効 操作できなくなりイベントも発生しません。	可	true	値、バインド	可	不可
readOnly	Boolean	書込み禁止/許可を指定します。 true:禁止 マウスオーバーなどの各種イベントは発生します。 false:許可	可	false	値、バインド	可	不可
password	Boolean	パスワードを入力する形式にするかどうかを指定します。表示後に変更することはできません。 true:パスワード入力形式 ブラウザにより“*”や“●”で表示されます。 false:パスワード入力形式でない	可	false	値	不可	不可
maxLength	Number	最大文字数を指定します。2バイト文字も1文字と数えます。本プロパティを指定したあとに、“指定なし”の状態に戻すことはできません。 1以上の数字:文字数を指定 (0以下は無効) 指定なし:ブラウザに依存	可	指定なし(-1)	値	可	不可
autoEscape	Boolean	自動脱出機能の有効/無効を指定します。 自動脱出機能とは、maxLengthに指定された文字数が入力された場合に、FocusManagerで設定された次の移動先に、自動的にフォーカスを移動させる機能です。 true:有効 false:無効	可	false	値	可	不可
tabIndex	Number	Tabキーで移動するフォーカスの順番を指定します。 HTMLのtabindex属性と同様の指定ができます。1以上の整数を指定した場合、数字の小さい順にフォーカスが移動します。 FocusManagerによるフォーカス移動には関係しません。	可	0	値	可	不可
uppercase	Boolean	半角および全角の英文字を大文字にするかどうかを指定します。表示後に変更することはできません。 true:入力文字を大文字に変換する 最初に画面に表示されるとき、入力確定時(フォーカスが外れたとき)、およびsetPropertyなどによりvalueプロパティが更新された場合に変換されます。 false:入力文字を変換しない	可	false	値	不可	不可
imeMode	String	IMEのモードを指定します。以下の値以外が指定された場合は、無視されます。Internet Explorer以外のブラウザでも、本プロパティは無視されます。 auto:自動 active:フォーカス時に日本語入力をONにする inactive:フォーカス時に日本語入力をOFFにする disabled:IMEを無効化	可	auto	値、バインド	可	不可

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

titleプロパティに長い文字列を指定すると、以下のような現象が起こることがあります。

• 
  全角30文字(半角60文字)以上の場合、自動的に改行される場合があります。
  改行は、全角文字または単語の区切りで行われます。
• 
  全角45文字(半角90文字)までが表示され、それ以上の文字は省略されます。

なお、空文字列を指定した場合は、表示されません。

• maxLengthプロパティを指定してIMEで入力したときの動作について、以下に示します。
  • 
    変換前の文字列が存在する場合、maxLengthプロパティで指定した文字数に達した段階で強制的に文字列が確定します。
  • 
    変換前の文字列が存在する場合、maxLengthプロパティで指定された文字数以上の文字列が入力できます。ただし、変換が確定した時点で、maxLengthプロパティに指定された文字数以上の文字列は無視されます。
• 自動脱出機能を有効にするには、以下の条件を満たす必要があります。
  • autoEscapeプロパティにtrueが指定されていること
  • maxLengthプロパティに最大文字数を指定してあること
  • 本部品がFocusManagerの対象となっており、FocusManagerに次のフォーカスの移動先が指定されていること
  • imeModeプロパティに“disabled”が指定されていること(Internet Explorerの場合)

初期化時の処理順序

画面の初期化時に、valueプロパティの値が表示されるときの処理順序を以下に示します。

1. 文字列が大文字に変換されます。(uppercaseプロパティがtrueの場合)
2. フォーマッタ処理が実行されます。(labelProviderプロパティが指定されている場合)

フォーマッタについて

本部品へのフォーカスの有無によって、以下のようにフォーマットされます。

• フォーカスがない場合
  labelProviderプロパティで指定されたオブジェクトによってフォーマットされたvalueプロパティの値が表示されます。
• フォーカスがある場合
  valueプロパティに指定された値が表示されます。

フォーマッタの指定方法は、“フォーマッタの指定方法”を参照してください。

■スタイルプロパティ

パーツ名	プレフィックス	クラス名	使用可能なスタイル
部品全体	なし	rcf-TextInput	サイズ カラー フォント(lineHeightを除く) テキスト(textIndent、whiteSpaceを除く)(注) ボーダー パディング

注)
Firefoxの場合は、wordSpacingも除きます。

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

名前	説明	イベントオブジェクト
onFocus	部品がフォーカスを得たときに呼ばれます。	ActionEvent
onBlur	部品がフォーカスを失ったときに呼ばれます。
onChange	部品がフォーカスを失い、かつ値が変更されたときに呼ばれます。
onValueChange	値が入力され、かつ値が変更されたときに呼ばれます。	ValueChangeEvent

部品共通のイベントリスナもあります。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

■補足事項

TextInputがフォーカスを得たとき、Internet ExplorerとFirefoxでは動作に違いがあります。

• 常に入力テキストが選択状態になります。

• TABキーによるブラウザのデフォルトのフォーカス移動によりフォーカスを得た場合は、入力テキストが選択状態になります。
• マウスクリックによりフォーカスを得た場合は、クリックした位置にカーソルが移動します。
• FocusManagerによるフォーカス移動によりフォーカスを得た場合は、入力テキストは選択状態にはならず、カーソルが表示されます。