포커스 이벤트

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

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

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

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

• FocusOutEvent와 FocusInEvent는 포커스 변경이 발생하기 직전에 전파 경로를 따라 전송됩니다.
• FocusEvent와 BlurEvent는 포커스가 변경된 직후 이벤트 타겟으로 전송됩니다.

모든 포커스 이벤트의 기본 클래스는 FocusEventBase입니다.

이벤트	설명	트리클다운	버블업	취소 가능
FocusOutEvent	요소가 포커스를 잃기 전에 전송됩니다.	✔	✔
FocusInEvent	요소가 포커스를 얻기 전에 전송됩니다.	✔	✔
BlurEvent	요소가 포커스를 잃은 후 전송됩니다.	✔
FocusEvent	요소가 포커스를 얻은 후 전송됩니다.	✔

고유 프로퍼티

다음 섹션은 포커스 이벤트에 고유한 관련 프로퍼티를 설명합니다. 이 섹션의 프로퍼티는 포커스 이벤트 패밀리 내에 포함된 모든 프로퍼티가 아닙니다. 모든 프로퍼티가 포함된 리스트는 API 문서의 FocusEventBase를 참조하십시오.

relatedTarget: 이벤트의 2차 타겟에 해당하는 시각적 요소를 포함합니다. FocusOut 및 Blur 이벤트의 경우에는 포커스를 얻은 요소를 포함합니다. FocusIn 및 Focus 이벤트의 경우에는 포커스를 잃은 요소를 포함합니다.

이벤트	target	relatedTarget
Blur	포커스를 잃는 요소입니다.	포커스를 얻는 요소입니다.
Focus	포커스를 얻는 요소입니다.	포커스를 잃는 요소입니다.
focusIn	포커스를 얻는 요소입니다.	포커스를 잃는 요소입니다.
focusOut	포커스를 잃는 요소입니다.	포커스를 얻는 요소입니다.

이벤트 리스트

FocusOutEvent

FocusOutEvent는 요소가 포커스를 잃으려고 할 때 전송됩니다.

target: 포커스를 잃는 요소입니다.

relatedTarget: 포커스를 얻는 요소입니다.

FocusInEvent

FocusInEvent는 요소가 포커스를 얻으려고 할 때 전송됩니다.

target: 포커스를 얻는 요소입니다.

relatedTarget: 포커스를 잃는 요소입니다.

BlurEvent

이벤트는 요소가 포커스를 얻은 후 전송됩니다.

target: 포커스를 잃은 요소입니다.

relatedTarget: 포커스를 얻은 요소입니다.

FocusEvent

The event sent after an element gains focus.

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;
            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;
        placeHolderMode = string.IsNullOrEmpty(textField.value);
        if (placeHolderMode)
            textField.value = placeHolderText;
    }
}