UXML 要素 TextField

A TextField lets users input text data into an application. It accepts and displays text input. You can set placeholder text to provide hints or instructions to the user on what to enter. You can also add validation functions to ensure that the entered data meets certain requirements.

Note: To align a TextField with other fields in an Inspector window, simply apply the .unity-base-field__aligned USS class to it. For more information, refer to BaseField.

TextField の作成

You can create a TextField with UI Builder, UXML, and C#. The following C# example creates a TextField that allows multiple lines text input:

var textField = new TextField();
textField.label = "Enter your text here:";
textField.multiline = true;
textField.maxLength = 140;

Set a placeholder text

You can set a placeholder text for the element. You can also hide the placeholder text on focus.

Note: The placeholder text won’t display if you set a value for the element. To unset a value in UI Builder, right-click the Value field in the element’s Inspector tab and select Unset.

In C#, use the placeholder and the hidePlaceholderOnFocus properties through textEdition:

myElement.textEdition.placeholder = "Enter your value here";
myElement.textEdition.hidePlaceholderOnFocus = true;

To style the placeholder text, use the .unity-base-text-field__input--placeholder USS selector.

入力テキスト選択のカスタマイズ

入力テキストはデフォルトで選択可能です。selectAllOnMouseUP や selectAllOnFocus など、選択時の動作はカスタム化可能です。

C#では textSelection を通じて設定します。

myElement.textSelection.selectAllOnMouseUp = false;
myElement.textSelection.selectAllOnFocus = false;

また、--unity-selection-color USS カスタムプロパティを使用して、選択したテキストにスタイルを設定することもできます。例えば、以下の USS は、選択した入力テキストの色を黄色に設定します。

.unity-base-text-field__input {
    --unity-selection-color: yellow;
}

縦スクロールバーの有効化

TextField で multiline (複数行テキスト入力を可能にするプロパティ) を有効にすると、テキスト入力フィールドに縦スクロールバーを表示できます。

C# では、verticalScrollerVisibility プロパティを ScrollerVisibility.Auto か ScrollerVisibility.AlwaysVisible に設定してください (以下参照)。

// Set the multiline property to true to enable multiple lines of text
textField.multiline = true;

// Set the vertical scrollbar visibility to AlwaysVisible
textField.verticalScrollerVisibility = ScrollerVisibility.AlwaysVisible;

入力テキストの動作の制御

イベント を使用して、入力テキストの動作を制御できます。

例えば、TextField の Enter および Shift + Tab キーボードイベントのデフォルト動作をオーバーライドするには、それらが TextElement 基本クラスで処理される前に KeyDownEvent を TrickleDown フェーズに登録します。

myField.RegisterCallback<KeyDownEvent>((evt) => { 

    if (evt.keyCode == KeyCode.Enter || evt.character == '/n')
    {
        // Submit logic
        evt.StopPropagation();
        evt.PreventDefault();
    }

    if (evt.modifiers == EventModifiers.Shift && (evt.keyCode == KeyCode.Tab || evt.character == '/t'))
    {
        // Focus logic
        evt.StopPropagation();
        evt.PreventDefault();
    }

}, TrickleDown.TrickleDown);

例

The following UXML example creates a TextField:

[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/TextFieldSnippet.uxml)]

The following C# example illustrates some of the customizable functionalities of the TextField:

[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/TextFieldSnippet.cs#sample)]

To try this example live in Unity, go to Window > UI Toolkit > Samples.

C# の基本クラスと名前空間

C# クラス: TextField
名前空間: UnityEngine.UIElements
基本クラス: TextInputBaseField_1

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

名前	型	説明
multiline	boolean	テキストフィールドに複数行を許可する場合は true を、そうでない場合は false を設定します。
value	string	The string currently being exposed by the field.

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

名前	型	説明
auto-correction	boolean	タッチスクリーンキーボードの自動修正のオン/オフを設定します。
binding-path	string	バインドされるべきターゲットプロパティのパス。
emoji-fallback-support	boolean	Specifies the order in which the system should look for Emoji characters when rendering text. If this setting is enabled, the global Emoji Fallback list will be searched first for characters defined as Emoji in the Unicode 14.0 standard.
focusable	boolean	要素がフォーカス可能である場合は true。
hide-mobile-input	boolean	モバイル入力フィールドの非表示/表示。
is-delayed	boolean	true に設定すると、ユーザーが Enter キーを押すか、テキストフィールドのフォーカスが失われるまで、value プロパティは更新されません。
keyboard-type	TouchScreenKeyboardType	使用されるモバイルキーボードのタイプ。
label	string	フィールドの横に表示されるラベルを表す文字列。
max-length	int	フィールドの最大文字数。
select-all-on-focus	boolean	Controls whether the element’s content is selected upon receiving focus.
select-all-on-mouse-up	boolean	Controls whether the element’s content is selected when you mouse up for the first time.
tabindex	int	フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。
value	string	フィールドに関連付けられた値。
vertical-scroller-visibility	UIElements.ScrollerVisibility	Option for controlling the visibility of the vertical scroll bar in the TextInputBaseField_1.

この要素は、VisualElement から以下の属性も継承します。

名前	型	説明
content-container	string	子要素はそれに追加されますが、通常は要素自体と同じです。
data-source	Object	Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children.
data-source-path	string	Path from the data source to the value.
name	string	この VisualElement の名前。 このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。
picking-mode	UIElements.PickingMode	mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。
style	string	この要素のスタイルオブジェクトへの参照。 C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。
toolbar	string	ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。
usage-hints	UIElements.UsageHints	VisualElement の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切なUsageHints を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの UsageHints が内部的に無視される可能性があることに留意してください。
view-data-key	string	Used for view data persistence, such as tree expanded states, scroll position, or zoom level. This key is used to save and load the view data from the view data store. If you don’t set this key, the persistence is disabled for the associated VisualElement. For more information, refer to View data persistence.

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

C# プロパティ	USS セレクター	説明
ussClassName	.unity-text-field	この型の要素の USS クラス名。
labelUssClassName	.unity-text-field__label	この型の要素のラベルの USS クラス名。
inputUssClassName	.unity-text-field__input	この型の要素の入力要素の USS クラス名。
ussClassName	.unity-base-text-field	この型の要素の USS クラス名。
labelUssClassName	.unity-base-text-field__label	この型の要素のラベルの USS クラス名。
inputUssClassName	.unity-base-text-field__input	この型の要素の入力要素の USS クラス名。
singleLineInputUssClassName	.unity-base-text-field__input--single-line	このタイプの要素の 1 行入力要素の USS クラス名。
multilineInputUssClassName	.unity-base-text-field__input--multiline	このタイプの要素の複数行入力要素の USS クラス名。
placeholderUssClassName	.unity-base-text-field__input--placeholder	プレースホルダーテキストが表示されている場合の入力要素の USS クラス名。
ussClassName	.unity-base-field	この型の要素の USS クラス名。
labelUssClassName	.unity-base-field__label	この型の要素のラベルの USS クラス名。
inputUssClassName	.unity-base-field__input	この型の要素の入力要素の USS クラス名。
noLabelVariantUssClassName	.unity-base-field--no-label	ラベルがない場合の、この型の要素の USS クラス名。
labelDraggerVariantUssClassName	.unity-base-field__label--with-dragger	この型の要素にドラッガーがアタッチされている場合のラベルの USS クラス名。
mixedValueLabelUssClassName	.unity-base-field__label--mixed-value	混合値を示す要素の USS クラス名
alignedFieldUssClassName	.unity-base-field__aligned	インスペクター要素で整列される要素の USS クラス名
disabledUssClassName	.unity-disabled	ローカルで無効にされた要素の USS クラス名。

また、Inspector や UI Toolkit Debugger の Matching Selectors セクション を使用して、どの USS セレクターが VisualElementのコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。

USS カスタムプロパティ

以下の表は、USS の TextField 要素にのみ利用可能なカスタムプロパティの説明です。

プロパティ	タイプ	説明
--unity-cursor-color	string	テキストのキャレットのカラーコード。
--unity-selection-color	string	選択中テキストのカラーコード。

その他の参考資料

• テキストを扱う
• UXML 要素 Label
• UXML 要素 DoubleField
• UXML 要素 LongField
• UXML 要素 FloatField
• UXML 要素 IntegerField
• UXML 要素 PropertyField