フォーカスイベント

レイアウトイベント

入力イベント

フォーカスイベントは、要素がフォーカスを得たり失ったりするときに発生します。

フォーカスイベントは、ビジュアル要素にフォーカスを当てたり外したりする必要がある場合に便利です。コントロールはフォーカスイベントを利用して、フォーカスの状態に応じてコンテンツを変更することがよくあります。例えば、フォーカスがないときにテキストフィールドにプレースホルダーテキストを表示したり、FocusInEvent に反応してプレースホルダーテキストを消去したりすることができます。

フォーカスは、タブやクリックなどのユーザーインタラクションや、element.Focus() を使った C# スクリプトによって、ビジュアル要素上で変更することができます。

フォーカスイベントは、2 つの異なるタイプに分かれます。

FocusOutEvent と FocusInEvent はフォーカスの変更が発生する直前に、伝播経路に沿って送信されます。
FocusEvent と BlurEvent はフォーカスの変更が発生した直後に、イベントのターゲットに送信されます。

すべてのフォーカスイベントの基本クラスは FocusEventBase です。

イベント	説明	下降伝播	上昇伝播
FocusOutEvent	要素がフォーカスを失う前に送信されます。	✔	✔
FocusInEvent	要素がフォーカスを得る前に送信されます。	✔	✔
BlurEvent	要素がフォーカスを失った後に送信されます。	✔
FocusEvent	要素がフォーカスを得た後に送信されます。	✔

固有のプロパティ

The following section explains relevant properties unique to focus events. This isn’t a complete list of all properties within the focus event family. For a full list, see the FocusEventBase in the API documentation.

relatedTarget: イベントの主要でないターゲットとなるビジュアル要素が含まれます。FocusOut と Blur イベントの場合、フォーカスを得る要素が含まれます。FocusIn と Focus イベントの場合、フォーカスを失う要素が含まれます。

イベント	target	relatedTarget
Blur	フォーカスを失う要素。	フォーカスを得る要素。
Focus	フォーカスを得る要素。	フォーカスを失う要素。
focusIn	フォーカスを得る要素。	フォーカスを失う要素。
focusOut	フォーカスを失う要素。	フォーカスを得る要素。

イベントリスト

FocusOutEvent

FocusOutEvent は、要素がフォーカスを失おうとしているときに送信されます。

target: フォーカスを失う要素。

relatedTarget: フォーカスを得る要素。

FocusInEvent

FocusInEvent は、要素がフォーカスを得ようとしているときに送信されます。

target: フォーカスを得る要素。

relatedTarget: フォーカスを失う要素。

BlurEvent

The BlurEvent is sent after an element lost focus.

target: フォーカスを失った要素。

relatedTarget: フォーカスを得た要素。

FocusEvent

The FocusEvent is sent after an element gained focus.

target: フォーカスを得た要素。

relatedTarget: フォーカスを失った要素。

例

以下の例は、TextField (テキストフィールド) でプレースホルダーテキストを使用する方法を示しています。

UXML で要素を作成した後、スクリプトはテキストフィールドにプレースホルダーテキストを割り当てます。テキストフィールドがフォーカスされると、FocusInEvent が発生し、プレースホルダーテキストが消去されます。FocusOutEvent は、TextField のコンテンツに基づいてプレースホルダーモードを切り替えます。

この例の動作を実際に見るには、以下を行います。

PlaceHolderExampleという名前の新しい C# スクリプトを作成します。
サンプルコードを C# スクリプトにコピーします。
Window > UI Toolkit > PlaceHolderExample で、新しくエディターウィンドウを開きます。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PlaceHolderExample : EditorWindow
{
    [MenuItem("Window/UI Toolkit/PlaceHolderExample")]
    public static void ShowExample()
    {
        PlaceHolderExample wnd = GetWindow<PlaceHolderExample>();
        wnd.titleContent = new GUIContent("PlaceHolderExample");
    }

    private bool placeHolderMode = true;
    private const string placeHolderText = "Write here";

    public void CreateGUI()
    {
        TextField textField = new TextField();
        textField.value = placeHolderText;
        rootVisualElement.Add(textField);

        textField.RegisterCallback<FocusInEvent>(OnFocusInTextField);
        textField.RegisterCallback<FocusOutEvent>(OnFocusOutTextField);
    }

    private void OnFocusInTextField(FocusInEvent evt)
    {
        // テキストフィールドがフォーカスされたばかりで、ユーザーが内部にテキストを書き込んだり編集したりする可能性がある場合は、
        // プレースホルダーテキストをクリアする必要があります (アクティブな場合は)
        if (placeHolderMode)
        {
            var textField = evt.target as TextField;
            textField.value = "";
        }
    }

    private void OnFocusOutTextField(FocusOutEvent evt)
    {
        // ユーザーが編集を終えて要素がフォーカスを失った後にテキストフィールドが空の場合は、
        // プレースホルダーテキストをテキストフィールドに書き込みます
        var textField = evt.target as TextField;
        placeHolderMode = string.IsNullOrEmpty(textField.value);
        if (placeHolderMode)
            textField.value = placeHolderText;
    }
}

レイアウトイベント

入力イベント