포커스 이벤트

포커스 이벤트는 요소가 포커스를 얻거나 잃으면 발생합니다.

포커스 이벤트는 포커스를 시각적 요소로 변경하거나 다른 요소로 변경해야 할 때 유용합니다. 컨트롤은 종종 포커스 상태에 따라 포커스 이벤트를 사용하여 콘텐츠를 변경합니다. 예를 들어 텍스트 필드는 포커스가 맞지 않은 상태에서 플레이스홀더 텍스트를 표시하거나 플레이스홀더 텍스트를 지우기 위해 FocusInEvent에 반응할 수 있습니다.

포커스는 탭 누르기나 클릭과 같은 사용자 상호 작용이나 element.Focus()가 있는 C# 스크립트 사용을 통해 시각적 요소에서 변경될 수 있습니다.

포커스 이벤트는 다음 두 가지 유형으로 나뉩니다.

• 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을 통해 요소를 생성하면 스크립트가 TextField에 플레이스홀더 텍스트를 할당합니다. TextField가 포커스에 있으면 FocusInEvent가 플레이스홀더 텍스트를 작동하고 지웁니다. FocusOutEvent는 TextField 콘텐츠에 따라 플레이스홀더 모드를 토글합니다.

예제의 동작을 확인하려면 다음 단계를 따르십시오.

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;
        }    
    }
}