Untuk pembuatan proyek waktu nyata seperti pendaftaran buletin, formulir kontak, formulir pembayaran, dan login pengguna, “ surel ” kolom wajib diisi. Pengguna harus memasukkan emailnya untuk melanjutkan atau memulai proses dan juga untuk login ke akunnya. Untuk tujuan ini, pengguna harus memberikan login atau pendaftaran email setiap saat, yang menjadikannya pengalaman pengguna yang buruk. Masalah ini diselesaikan dengan bantuan properti pelengkapan otomatis JavaScript HTML DOM.
Blog ini menjelaskan prosedur untuk menangani pelengkapan otomatis email input DOM HTML milik JavaScript.
Bagaimana Menangani Properti Pelengkapan Otomatis Email Input DOM HTML?
Properti pelengkapan otomatis dari input HTML DOM “ surel Elemen ”, memberikan daftar berisi data terbaru yang sebelumnya dimasukkan ke dalam elemen “ surel ' bidang. Hal ini memungkinkan pengguna untuk memilih emailnya dari daftar jika tersedia secara otomatis.
Sintaksis
Sintaks untuk properti pelengkapan otomatis email masukan DOM dinyatakan di bawah ini:
emailObj. pelengkapan otomatis = 'hidup|mati'
Sintaks di atas menyetel dan menghapus properti pelengkapan otomatis pada elemen emailObj.
emailObj. pelengkapan otomatis
Sintaks ini mengambil nilai “ pelengkapan otomatis ” properti untuk mengetahui apakah properti ini diaktifkan atau tidak.
Mari kita punya program JavaScript untuk properti pelengkapan otomatis
Contoh: Mengaktifkan, Menonaktifkan, dan Mengambil Nilai Properti Pelengkapan Otomatis
Dalam contoh ini, properti pelengkapan otomatis akan dinonaktifkan, diaktifkan dengan menyetel properti ini ke “ pada ' Dan ' mati ” masing-masing. Kemudian, nilai properti pelengkapan otomatis saat ini akan diambil:
< tubuh >< tengah >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
Surel: < memasukkan jenis = 'surel' pengenal = 'email demo' >
< saudara >
< saudara >
< tombol klik = 'Penonaktifkan()' > Penonaktif < / tombol >
< tombol klik = 'Pengaktif()' > Pemberdaya < / tombol >
< h3 pengenal = 'target' > < / h3 >
< tombol klik = 'Pemeriksa()' > Pemeriksa < / tombol >
< / tengah >
< naskah >
fungsi Disabler() {
document.getElementById('demoEmail').autocomplete = 'mati';
}
fungsi Pengaktif() {
document.getElementById('demoEmail').autocomplete = 'aktif';
}
pemeriksa fungsi() {
var j = document.getElementById('demoEmail').pelengkapan otomatis;
document.getElementById('target').innerHTML = j;
}
< / naskah >
< / tubuh >
Penjelasan dari blok kode di atas dinyatakan di bawah ini:
- Pertama, “ memasukkan ” elemen dibuat dengan jenis atribut “ surel ” untuk menerima dan melakukan validasi dasar untuk memastikan data yang dimasukkan adalah email.
- Selanjutnya, tiga elemen tombol dibuat yang disebut “ Penonaktif()”, “Pengaktif()”, dan “Pemeriksa() ” fungsi.
- Sekarang, tentukan “ Penonaktif ()” dengan memilih fungsi “ memasukkan ” elemen menggunakan idnya dan menetapkan nilai “ mati ' untuk itu ' pelengkapan otomatis ' Properti.
- Dalam ' Pemberdaya ()” fungsi, terapkan hal yang sama “ pelengkapan otomatis ” properti tetapi sekarang berikan nilai “ pada ”.
- Setelah itu, tentukan “ Pemeriksa ()” berfungsi dengan menambahkan “ pelengkapan otomatis ” di sebelah referensi elemen masukan dan menyimpannya dalam variabel “ J ”.
- Pada akhirnya, tampilkan nilai variabel ini “ J ” di halaman web menggunakan “ innerHTML ' Properti.
Output setelah kompilasi di atas ditampilkan sebagai:
Outputnya menunjukkan bahwa properti pelengkapan otomatis email masukan dinonaktifkan dan diaktifkan. Nilainya juga diambil dan ditampilkan di halaman web.
Kesimpulan
Properti pelengkapan otomatis email input DOM HTML, secara otomatis membuat daftar yang berisi nilai yang sebelumnya dimasukkan pengguna di bidang email. Sehingga, pengguna dapat dengan mudah memilih dari data yang dimasukkan sebelumnya dan karenanya, meningkatkan pengalaman pengguna. Properti ini disetel ketika nilai “ pada ” ditugaskan padanya dan dinonaktifkan ketika nilai “ mati ” disahkan. Blog ini telah menjelaskan properti pelengkapan otomatis email input DOM dengan JavaScript.