Kotak kata sandi
Kotak kata sandi adalah kotak input teks yang menyembunyikan karakter yang ditik ke dalamnya untuk tujuan privasi. Kotak kata sandi terlihat seperti kotak teks, kecuali kotak teks merender karakter tempat penampung sebagai pengganti teks yang telah dimasukkan. Anda dapat mengonfigurasi karakter tempat penampung.
Secara default, kotak kata sandi menyediakan cara bagi pengguna untuk melihat kata sandi mereka dengan menahan tombol ungkapan. Anda dapat menonaktifkan tombol ungkapkan, atau menyediakan mekanisme alternatif untuk mengungkapkan kata sandi, seperti kotak centang.
Apakah ini kontrol yang tepat?
Gunakan kontrol PasswordBox untuk mengumpulkan kata sandi atau data privat lainnya, seperti nomor Jaminan Sosial.
Untuk informasi selengkapnya tentang memilih kontrol teks yang tepat, lihat artikel Kontrol teks .
Rekomendasi
- Gunakan teks label atau tempat penampung jika tujuan kotak kata sandi tidak jelas. Label terlihat apakah kotak input teks memiliki nilai atau tidak. Teks tempat penampung ditampilkan di dalam kotak input teks dan menghilang setelah nilai dimasukkan.
- Beri kotak kata sandi lebar yang sesuai untuk rentang nilai yang dapat dimasukkan. Word panjang bervariasi di antara bahasa, jadi mempertimbangkan pelokalan jika Anda ingin aplikasi Anda siap untuk dunia.
- Jangan letakkan kontrol lain tepat di samping kotak input kata sandi. Kotak kata sandi memiliki tombol ungkap kata sandi bagi pengguna untuk memverifikasi kata sandi yang telah mereka ketik, dan memiliki kontrol lain tepat di sebelahnya mungkin membuat pengguna secara tidak sengaja mengungkapkan kata sandi mereka ketika mereka mencoba berinteraksi dengan kontrol lain. Untuk mencegah hal ini terjadi, letakkan beberapa penspasian antara kata sandi di kotak letakkan dan kontrol lainnya, atau letakkan kontrol lainnya di baris berikutnya.
- Pertimbangkan untuk menyajikan dua kotak kata sandi untuk pembuatan akun: satu untuk kata sandi baru, dan satu detik untuk mengonfirmasi kata sandi baru.
- Hanya tampilkan satu kotak kata sandi untuk masuk.
- Saat kotak kata sandi digunakan untuk memasukkan PIN, pertimbangkan untuk memberikan respons instan segera setelah nomor terakhir dimasukkan alih-alih menggunakan tombol konfirmasi.
Contoh
Kotak kata sandi memiliki beberapa status, termasuk yang penting ini.
Kotak kata sandi tidak aktif dapat menampilkan teks petunjuk sehingga pengguna mengetahui tujuannya:
Saat pengguna mengetik dalam kotak kata sandi, perilaku defaultnya adalah menampilkan poin yang menyembunyikan teks yang dimasukkan:
Menekan tombol "ungkapkan" di sebelah kanan memberikan intip teks kata sandi yang dimasukkan:
UWP dan WinUI 2
Penting
Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.
Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.
API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .
- API UWP:kelas PasswordBox, properti Kata Sandi, properti PasswordChar, properti PasswordRevealMode, peristiwa PasswordChanged
- Buka aplikasi Galeri WinUI 2 dan lihat PasswordBox beraksi. Aplikasi WinUI 2 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.
Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.
Buat kotak kata sandi
Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub
Gunakan properti Kata Sandi untuk mendapatkan atau mengatur konten Kotak Kata Sandi. Anda dapat melakukan ini di handler untuk peristiwa PasswordChanged untuk melakukan validasi saat pengguna memasukkan kata sandi. Atau, Anda dapat menggunakan peristiwa lain, seperti tombol Klik, untuk melakukan validasi setelah pengguna menyelesaikan entri teks.
Berikut adalah XAML untuk kontrol kotak kata sandi yang menunjukkan tampilan default PasswordBox. Saat pengguna memasukkan kata sandi, Anda memeriksa untuk melihat apakah itu nilai harfiah, "Kata Sandi". Jika ya, Anda menampilkan pesan kepada pengguna.
<StackPanel>
<PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
PasswordChanged="passwordBox_PasswordChanged"/>
<TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>
private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
if (passwordBox.Password == "Password")
{
statusText.Text = "'Password' is not allowed as a password.";
}
else
{
statusText.Text = string.Empty;
}
}
Berikut adalah hasilnya ketika kode ini berjalan dan pengguna memasukkan "Kata Sandi".
Karakter kata sandi
Anda dapat mengubah karakter yang digunakan untuk menutupi kata sandi dengan mengatur properti PasswordChar . Di sini, poin default diganti dengan tanda paku.
<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>
Hasilnya terlihat seperti ini.
Teks header dan tempat penampung
Anda dapat menggunakan properti Header dan PlaceholderText untuk menyediakan konteks untuk PasswordBox. Ini sangat berguna ketika Anda memiliki beberapa kotak, seperti pada formulir untuk mengubah kata sandi.
<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>
Panjang maksimum
Tentukan jumlah karakter maksimum yang dapat dimasukkan pengguna dengan mengatur properti MaxLength . Tidak ada properti untuk menentukan panjang minimum, tetapi Anda dapat memeriksa panjang kata sandi, dan melakukan validasi lainnya, dalam kode aplikasi Anda.
Mode ungkap kata sandi
Kotak Kata Sandi memiliki tombol bawaan yang dapat ditekan pengguna untuk menampilkan teks kata sandi. Berikut adalah hasil dari tindakan pengguna. Ketika pengguna merilisnya, kata sandi secara otomatis disembunyikan lagi.
Mode intip
Secara default, tombol ungkap kata sandi (atau tombol "intip") ditampilkan. Pengguna harus terus menekan tombol untuk melihat kata sandi, sehingga tingkat keamanan yang tinggi dipertahankan.
Nilai properti PasswordRevealMode bukan satu-satunya faktor yang menentukan apakah tombol ungkap kata sandi terlihat oleh pengguna. Faktor lain termasuk apakah kontrol ditampilkan di atas lebar minimum, apakah Kotak Kata Sandi memiliki fokus, dan apakah bidang entri teks berisi setidaknya satu karakter. Tombol ungkap kata sandi hanya ditampilkan saat Kotak Kata Sandi menerima fokus untuk pertama kalinya dan karakter dimasukkan. Jika PasswordBox kehilangan fokus lalu mendapatkan kembali fokus, tombol ungkapkan tidak ditampilkan lagi kecuali kata sandi dibersihkan dan entri karakter dimulai kembali.
Mode Tersembunyi dan Terlihat
Nilai enumerasi PasswordRevealMode lainnya, Tersembunyi dan Terlihat, menyembunyikan tombol ungkap kata sandi dan memungkinkan Anda mengelola secara terprogram apakah kata sandi dikaburkan.
Untuk selalu mengaburkan kata sandi, atur PasswordRevealMode ke Tersembunyi. Kecuali Anda memerlukan kata sandi untuk selalu dikaburkan, Anda dapat menyediakan UI kustom untuk membiarkan pengguna mengalihkan PasswordRevealMode antara Tersembunyi dan Terlihat. Misalnya, Anda dapat menggunakan kotak centang untuk mengalihkan apakah kata sandi dikaburkan, seperti yang ditunjukkan dalam contoh berikut. Anda juga dapat menggunakan kontrol lain, seperti ToggleButton, untuk membiarkan pengguna beralih mode.
Contoh ini menunjukkan cara menggunakan Kotak Centang untuk memungkinkan pengguna mengalihkan mode pengungkapan PasswordBox.
<StackPanel Width="200">
<PasswordBox Name="passwordBox1"
PasswordRevealMode="Hidden"/>
<CheckBox Name="revealModeCheckBox" Content="Show password"
IsChecked="False"
Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>
private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
if (revealModeCheckBox.IsChecked == true)
{
passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
}
else
{
passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
}
}
Kotak Kata Sandi ini terlihat seperti ini.
Pilih keyboard yang tepat untuk kontrol teks Anda
Untuk membantu pengguna memasukkan data menggunakan keyboard sentuh, atau Panel Input Lunak (SIP), Anda dapat mengatur cakupan input kontrol teks agar sesuai dengan jenis data yang diharapkan dimasukkan pengguna. PasswordBox hanya mendukung nilai cakupan input Password dan NumericPin . Nilai lainnya diabaikan.
Untuk informasi selengkapnya tentang cara menggunakan cakupan input, lihat Menggunakan cakupan input untuk mengubah keyboard sentuh.
Dapatkan kode sampel
- Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.
Artikel terkait
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk