Untuk penciptaan projek masa nyata seperti pendaftaran surat berita, borang hubungan, borang pembayaran dan log masuk pengguna, ' emel ' bidang diperlukan. Pengguna perlu memasukkan e-melnya untuk meneruskan atau memulakan proses dan juga untuk log masuk ke akaunnya. Untuk tujuan ini, pengguna perlu menyediakan log masuk mel atau mendaftar setiap kali, yang menjadikannya pengalaman pengguna yang buruk. Isu ini diselesaikan dengan bantuan ciri autolengkap HTML HTML DOM.
Blog ini menerangkan prosedur untuk mengendalikan sifat autolengkap e-mel input HTML DOM JavaScript.
Bagaimana untuk Mengendalikan Harta Autolengkap E-mel Input HTML DOM?
Sifat autolengkap input DOM HTML “ emel elemen ', menyediakan senarai yang mengandungi data terkini yang sebelum ini dimasukkan dalam ' emel ” padang. Ia membolehkan pengguna memilih e-melnya daripada senarai jika ia tersedia secara automatik.
Sintaks
Sintaks untuk sifat autolengkap e-mel input DOM dinyatakan di bawah:
emailObj. autolengkap = 'hidup|mati'
Sintaks di atas menetapkan dan mengalih keluar sifat autolengkap pada elemen emailObj.
emailObj. autolengkap
Sintaks ini mendapatkan semula nilai ' autolengkap ” harta untuk mengetahui sama ada harta ini didayakan atau tidak.
Mari adakan program JavaScript untuk sifat autolengkap
Contoh: Mendayakan, Melumpuhkan dan Mendapatkan Nilai Harta Autolengkap
Dalam contoh ini, sifat autolengkap akan dilumpuhkan, didayakan dengan menetapkan sifat ini kepada ' pada ” dan “ dimatikan ” masing-masing. Kemudian, nilai semasa harta autolengkap akan diambil semula:
< badan >< pusat >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
E-mel: < input menaip = 'e-mel' ID = 'demoEmail' >
< br >
< br >
< butang onclick = 'Penyahdaya()' > Pelumpuh < / butang >
< butang onclick = 'Enabler()' > Pemboleh < / butang >
< h3 ID = 'sasaran' > < / h3 >
< butang onclick = 'Pemeriksa()' > Pemeriksa < / butang >
< / pusat >
< skrip >
fungsi Disabler() {
document.getElementById('demoEmail').autocomplete = 'off';
}
function Enabler() {
document.getElementById('demoEmail').autocomplete = 'on';
}
fungsi Checker() {
var j = document.getElementById('demoEmail').autolengkap;
document.getElementById('target').innerHTML = j;
}
< / skrip >
< / badan >
Penjelasan blok kod di atas dinyatakan di bawah:
- Pertama, ' input 'elemen dicipta dengan jenis atribut ' emel ” untuk menerima dan melakukan pengesahan asas untuk memastikan data yang dimasukkan ialah e-mel.
- Seterusnya, tiga elemen butang dicipta yang memanggil ' Disabler()”, “Enabler()”, dan “Checker() ” fungsi.
- Sekarang, tentukan “ Pelumpuh ()” dengan memilih “ input elemen ” menggunakan idnya dan memberikan nilai “ dimatikan 'untuknya' autolengkap ” harta benda.
- Di dalam ' Pemboleh ()', gunakan fungsi ' yang sama autolengkap harta ” tetapi kini berikannya nilai “ pada ”.
- Selepas itu, tentukan “ Pemeriksa ()” dengan menambah hanya “ autolengkap ' bersebelahan dengan rujukan elemen input dan simpannya dalam pembolehubah ' j ”.
- Pada akhirnya, paparkan nilai pembolehubah ini ' j ” melalui halaman web menggunakan “ innerHTML ” harta benda.
Output selepas penyusunan perkara di atas ditunjukkan sebagai:
Output menunjukkan bahawa sifat autolengkap e-mel input sedang dilumpuhkan dan didayakan. Nilainya juga diambil dan dipaparkan pada halaman web.
Kesimpulan
Sifat autolengkap e-mel input HTML DOM, secara automatik mencipta senarai yang mengandungi nilai yang sebelum ini dimasukkan oleh pengguna dalam medan e-mel. Oleh itu, pengguna boleh memilih dengan mudah daripada data yang dimasukkan sebelum ini dan seterusnya, meningkatkan pengalaman pengguna. Sifat ini ditetapkan apabila nilai “ pada ” diberikan kepadanya dan dilumpuhkan apabila nilai “ dimatikan ” diluluskan. Blog ini telah menerangkan sifat autolengkap e-mel input DOM oleh JavaScript.