Til oprettelse af realtidsprojekter som nyhedsbrevstilmeldinger, kontaktformularer, betalingsformularer og brugerlogin, ' e-mail ” felt er påkrævet. Brugeren skal indtaste sin e-mail for at fortsætte eller starte processen og også for at logge ind på sin konto. Til dette formål skal brugeren angive et mail-login eller registrere hver gang, hvilket gør det til en dårlig brugeroplevelse. Dette problem er løst ved hjælp af JavaScript HTML DOM autofuldførelsesegenskab.
Denne blog forklarer proceduren til at håndtere HTML DOM-input e-mail autofuldførelse egenskaben for JavaScript.
Hvordan håndteres HTML DOM-input e-mail autofuldførelsesegenskab?
Autofuldførelsesegenskaben for HTML DOM-input ' e-mail '-element, giver en liste, der indeholder de seneste data, der tidligere er indsat i ' e-mail ' Mark. Det giver en bruger mulighed for at vælge sin e-mail fra listen, hvis den er tilgængelig automatisk.
Syntaks
Syntaksen for DOM-input e-mail autofuldførelsesegenskab er angivet nedenfor:
emailObj. autofuldførelse = 'on|off'
Ovenstående syntaks indstiller og fjerner egenskaben autofuldførelse over emailObj-elementet.
emailObj. autofuldførelse
Denne syntaks henter værdien af ' autofuldførelse ” egenskab for at finde ud af, om denne egenskab er aktiveret eller ej.
Lad os have et JavaScript-program til autofuldførelsesejendomme
Eksempel: Aktivering, deaktivering og hentning af værdien af autofuldførelsesegenskab
I dette eksempel vil autofuldførelsesegenskaben blive deaktiveret, aktiveret ved at indstille denne egenskab til ' på ' og ' af ' henholdsvis. Derefter vil den aktuelle værdi af autofuldførelsesegenskab blive hentet:
< legeme >< centrum >
< h1 stil = 'farve: kadetblå;' > Linux < / h1 >
E-mail: < input type = 'e-mail' id = 'demoE-mail' >
< br >
< br >
< knap onclick = 'Deaktiverer()' > Disabler < / knap >
< knap onclick = 'Enabler()' > Aktiverer < / knap >
< h3 id = 'mål' > < / h3 >
< knap onclick = 'Checker()' > Checker < / knap >
< / centrum >
< manuskript >
function Disabler() {
document.getElementById('demoEmail').autocomplete = 'fra';
}
function Enabler() {
document.getElementById('demoEmail').autocomplete = 'til';
}
function Checker() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / manuskript >
< / legeme >
Forklaringen af ovenstående kodeblok er angivet nedenfor:
- For det første ' input ' element er oprettet med en type attribut ' e-mail ” for at acceptere og udføre grundlæggende validering for at sikre, at de indtastede data er e-mail.
- Dernæst oprettes tre knapelementer, som kalder ' Disabler()', 'Enabler()' og 'Checker() ” funktioner.
- Definer nu ' Disabler ()'-funktionen ved at vælge ' input ' element ved hjælp af dets id og tildeler værdien af ' af ' for dets ' autofuldførelse ” ejendom.
- I ' Aktiverer ()' funktion, anvende den samme ' autofuldførelse ' egenskab, men tildel den nu en værdi på ' på '.
- Derefter skal du definere ' Checker ()'-funktionen ved blot at tilføje ' autofuldførelse ' ved siden af referencen for inputelementet og gem det i variabel ' j '.
- Til sidst skal du vise værdien af denne variabel ' j ' over websiden ved hjælp af ' indreHTML ” ejendom.
Output efter kompileringen af ovenstående er vist som:
Outputtet viser, at egenskaben for autofuldførelse af input-e-mail bliver deaktiveret og aktiveret. Dens værdi hentes også og vises på websiden.
Konklusion
HTML DOM input e-mail autofuldførelse egenskaben, opretter automatisk en liste, der indeholder de værdier, som brugeren tidligere har indtastet i e-mail-feltet. Så brugeren nemt kan vælge fra deres tidligere indtastede data og dermed forbedrer brugeroplevelsen. Denne egenskab indstilles, når værdien af ' på ' er tildelt den og deaktiveret, når værdien af ' af ” er bestået. Denne blog har forklaret DOM-input e-mail autofuldførelse egenskaben ved hjælp af JavaScript.