Peristiwa fokus terjadi ketika keuntungan elemen atau kehilangan fokus.
Acara fokus berguna ketika Anda perlu mengubah fokus ke dan jauh dari elemen visual. Kontrol sering menggunakan acara fokus untuk mengubah konten mereka, tergantung pada keadaan fokus. Misalnya, bidang teks dapat menampilkan teks placeholder sementara itu tidak fokus, atau dapat bereaksi terhadap FocusInEvent
untuk membersihkan teks placeholder.
Fokus dapat mengubah elemen visual dari interaksi pengguna, seperti tabbing atau mengklik, atau menggunakan C# scriptsSepotong kode yang memungkinkan Anda untuk membuat Komponen Anda sendiri, memicu peristiwa permainan, memodifikasi sifat komponen dari waktu ke waktu dan menanggapi input pengguna dengan cara apa pun yang Anda sukai. More info
Lihat di Glossary dengan element.Focus()
.
Peristiwa fokus terpisah menjadi dua jenis yang berbeda:
FocusOutEvent
dan FocusInEvent
dikirim sepanjang jalur perambatan sebelum perubahan fokus terjadi.FocusEvent
dan BlurEvent
dikirim ke target acara, segera setelah perubahan fokus.Kelas dasar untuk semua acara fokus adalah FocusEventBase.
Event | Description | Trickles down | Bubbles up | Cancellable |
---|---|---|---|---|
FocusOutEvent | Sent sebelum elemen kehilangan fokus. | ✔ | ✔ | |
FocusInEvent | Sent sebelum elemen mendapatkan fokus. | ✔ | ✔ | |
BlurEvent | Setelah elemen kehilangan fokus. | ✔ | ||
FocusEvent | Setelah elemen telah mendapatkan fokus. | ✔ |
Bagian berikut menjelaskan sifat yang relevan unik untuk acara fokus. Ini bukan daftar lengkap semua properti dalam keluarga acara fokus. Untuk daftar lengkap, lihat FocusEventBase dalam dokumentasi API.
relatedTarget
: Mengandung elemen visual yang merupakan target sekunder acara. Untuk peristiwa FocusOut
dan Blur
, mengandung unsur yang mendapatkan fokus. Untuk peristiwa FocusIn
dan Focus
, mengandung unsur yang kehilangan fokus.
Event | target | relatedTarget |
---|---|---|
Blur | Elemen yang kehilangan fokus. | Elemen yang mendapatkan fokus. |
Focus | Elemen yang mendapatkan fokus. | Elemen yang kehilangan fokus. |
Login Sitemap | Elemen yang mendapatkan fokus. | Elemen yang kehilangan fokus. |
Login Sitemap | Elemen yang kehilangan fokus. | Elemen yang mendapatkan fokus. |
FocusOutEvent
dikirim ketika elemen sekitar untuk kehilangan fokus.
target
: Elemen yang akan kehilangan fokus.
relatedTarget
: Elemen yang akan mendapatkan fokus.
FocusInEvent
dikirim ketika elemen adalah tentang untuk mendapatkan fokus.
target
: Elemen yang akan mendapatkan fokus.
relatedTarget
: Elemen yang akan kehilangan fokus.
BlurEvent
dikirim setelah elemen yang hilang fokus.
target
: Elemen yang hilang fokus.
relatedTarget
: Elemen yang mendapatkan fokus.
FocusEvent
dikirim setelah elemen mendapatkan fokus.
target
: Elemen yang mendapatkan fokus.
relatedTarget
: Elemen yang hilang fokus.
Contoh berikut menunjukkan cara menggunakan teks placeholder dalam TextField.
Setelah Anda membuat elemen melalui UXML, script menetapkan teks placeholder ke TextField. Ketika TextField fokus, api FocusInEvent
dan membersihkan teks placeholder. FocusOutEvent
toggles mode placeholder berdasarkan konten TextField.
Untuk melihat contoh dalam tindakan, lakukan berikut:
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;
}
}