TextField

TextField は、ユーザーがアプリケーションにテキストデータを入力できるようにするものです。テキストの入力と表示が可能です。プレースホルダーテキストを設定して、ユーザーに入力内容のヒントや指示を与えることができます。また、入力したデータが特定の要件を満たしていることを確認するために、検証用の関数を追加することもできます。

ノート: TextField を Inspector ウィンドウ内の他のフィールドに揃えるには、.unity-base-field__aligned USS クラスを適用してください。詳細については、BaseField を参照してください。

TextField の作成

TextField は、UI Builder、UXML、C# で作成できます。以下の C# の例では、複数行のテキスト入力を許可する TextField を作成します。

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

プレースホルダーテキストの設定

要素のプレースホルダーテキストを設定できます。フォーカスされているプレースホルダーテキストを非表示にすることもできます。

ノート: 要素に値を設定すると、プレースホルダーテキストは表示されません。UI Builder で値の設定を解除するには、要素の Inspector タブの Value フィールドを右クリックし、Unset を選択します。

C# では、placeholder プロパティと hidePlaceholderOnFocus プロパティを textEdition で使用します。

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

プレースホルダーテキストのスタイルを設定するには、.unity-base-text-field__input--placeholder USS セレクターを使用します。

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

入力テキストはデフォルトで選択可能です。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 で複数行テキスト入力を有効にすると、テキスト入力フィールドに垂直のスクロールバーを表示できます。

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;

入力テキストの動作のコントロール

イベント を使用して、入力テキストの動作をコントロールできます。以下の例では、イベントコールバック関数を使用して、テキストフィールドのナビゲーションおよび送信イベントをハンドルします。この例では、それらが TextElement 基本クラスでハンドルされる前に、ナビゲーションイベント を TrickleDown フェーズに登録します。

// A callback function that executes submit logic to handle user input submission. 
// It stops the propagation of the event to prevent it from reaching other event handlers.
myField.RegisterCallback<NavigationSubmitEvent>((evt) => {

    // Submit logic
    evt.StopPropagation();
}, TrickleDown.TrickleDown);

// A callback function that executes focus logic to handle navigation between different UI elements. 
// If the navigation direction is up, down, left, or right, it stops the propagation of the event and instructs 
// the focusController to ignore the event.
myField.RegisterCallback<NavigationMoveEvent>((evt) => {

    if (evt.direction == NavigationMoveEvent.Direction.Up || evt.direction == NavigationMoveEvent.Direction.Down || evt.direction == NavigationMoveEvent.Direction.Left || evt.direction == NavigationMoveEvent.Direction.Right)
    {
        // Focus logic
        evt.StopPropagation();
        focusController.IgnoreEvent(evt);
    }

}, TrickleDown.TrickleDown);

例

以下は UXML で、TextField を作成する例です。

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <TextField label="UXML Field" name="the-uxml-field" value="It's snowing outside." />
</UXML>

以下の C# の例は、TextField のカスタマイズ可能な機能の一部を示しています。

/// <sample>
// Get a reference to the field from UXML and append a value to it.
var uxmlField = container.Q<TextField>("the-uxml-field");
uxmlField.value += "..";

// Create a new field, disable it, and give it a style class.
var csharpField = new TextField("C# Field");
csharpField.value = "It's snowing outside...";
csharpField.SetEnabled(false);
csharpField.AddToClassList("some-styled-field");
csharpField.value = uxmlField.value;
container.Add(csharpField);

// Mirror the value of the UXML field into the C# field.
uxmlField.RegisterCallback<ChangeEvent<string>>((evt) =>
{
    csharpField.value = evt.newValue;
});
/// </sample>

この例を Unity でライブ体験するには、Window > UI Toolkit > Samples の順に移動します。

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

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

メンバー UXML 属性

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

継承された UXML 属性

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

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

USS クラス

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

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

USS のカスタムプロパティ

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

追加リソース

• テキストの使用法
• ラベル
• DoubleField
• LongField
• FloatField
• IntegerField
• PropertyField