フォーカスイベント

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

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

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

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

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

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

固有のプロパティ

以下のセクションでは、フォーカスイベントに特有の関連プロパティについて説明します。これは、フォーカスイベントファミリーのすべてのプロパティの完全なリストではありません。完全なリストについては、API ドキュメントの FocusEventBase を参照してください。

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

イベントリスト

FocusOutEvent

FocusOutEvent は要素がフォーカスを失う直前に送信されます。

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

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

FocusInEvent

FocusInEvent は要素がフォーカスを得る直前に送信されます。

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

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

BlurEvent

BlurEvent は要素がフォーカスを失った後に送信されます。

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

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

FocusEvent

FocusEvent は要素がフォーカスを得た後に送信されます。

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

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

例

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

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

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

1. PlaceHolderExampleという名前の新しい C# スクリプトを作成します。
2. サンプルコードを C# スクリプトにコピーします。
3. 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 the text field just received focus and the user might want to write
        // or edit the text inside, the placeholder text should be cleared (if active)
        if (placeHolderMode)
        {
            var textField = evt.target as TextField;
            if (textField != null)
            {
                textField.value = "";
            }
        }
    }        

    private void OnFocusOutTextField(FocusOutEvent evt)
    {
        // If the text field is empty after the user is done editing and the
        // element lost focus, write placeholder text into the text field
        var textField = evt.target as TextField;
        if (textField != null)
        {
            placeHolderMode = string.IsNullOrEmpty(textField.value);
            if (placeHolderMode)
                textField.value = placeHolderText;
        }    
    }
}