For å lage sanntidsprosjekter som nyhetsbrevregistreringer, kontaktskjemaer, betalingsskjemaer og brukerpålogginger, ' e-post ' Feltet er påkrevet. Brukeren må skrive inn e-postadressen sin for å fortsette eller starte prosessen og også for å logge inn på kontoen sin. For dette formålet må brukeren oppgi en e-postpålogging eller registrere seg hver gang, noe som gjør det til en dårlig brukeropplevelse. Dette problemet er løst ved hjelp av JavaScript HTML DOM autofullføringsegenskapen.
Denne bloggen forklarer prosedyren for å håndtere HTML DOM-inndata-e-post autofullføringsegenskapen til JavaScript.
Hvordan håndtere HTML DOM-inndata for autofullføring av e-post?
Autofullføringsegenskapen til HTML DOM-inndata ' e-post ' element, gir en liste som inneholder de nyeste dataene som tidligere er satt inn i ' e-post ' felt. Den lar en bruker velge sin e-post fra listen hvis den er tilgjengelig automatisk.
Syntaks
Syntaksen for DOM-inndata for autofullføring av e-post er angitt nedenfor:
emailObj. autofullfør = 'på|av'
Syntaksen ovenfor setter og fjerner autofullføringsegenskapen over emailObj-elementet.
emailObj. autofullfør
Denne syntaksen henter verdien av ' autofullfør ”-egenskapen for å finne ut om denne egenskapen er aktivert eller ikke.
La oss ha et JavaScript-program for autofullføringsegenskap
Eksempel: Aktivering, deaktivering og henting av verdien for autofullføringsegenskap
I dette eksemplet vil autofullføringsegenskapen bli deaktivert, aktivert ved å sette denne egenskapen til ' på ' og ' av 'henholdsvis. Deretter vil gjeldende verdi av autofullføringsegenskapen bli hentet:
< kropp >< senter >
< h1 stil = 'farge: kadettblå;' > Linux < / h1 >
E-post: < input type = 'e-post' id = 'demoEmail' >
< br >
< br >
< knapp ved trykk = 'Disabler()' > Deaktiverer < / knapp >
< knapp ved trykk = 'Enabler()' > Aktiver < / knapp >
< h3 id = 'mål' > < / h3 >
< knapp ved trykk = 'Checker()' > Checker < / knapp >
< / senter >
< manus >
function Disabler() {
document.getElementById('demoEmail').autocomplete = 'av';
}
function Enabler() {
document.getElementById('demoEmail').autocomplete = 'på';
}
funksjon Checker() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / manus >
< / kropp >
Forklaringen av kodeblokken ovenfor er angitt nedenfor:
- Først, ' input ' element er opprettet med en type attributt ' e-post ” for å godta og utføre grunnleggende validering for å sikre at innlagte data er e-post.
- Deretter opprettes tre knappeelementer som kaller ' Disabler()”, “Enabler()” og “Checker() ' funksjoner.
- Nå, definer ' Deaktiverer ()»-funksjonen ved å velge « input '-element ved å bruke sin id og tilordne verdien av ' av ' for dens ' autofullfør ' eiendom.
- I « Aktiver ()»-funksjonen, bruk samme « autofullfør ' egenskap, men tilordne den nå en verdi på ' på '.
- Etter det, definer ' Checker ()'-funksjonen ved å legge til bare ' autofullfør ' ved siden av referansen til inngangselementet og lagre det i variabel ' j '.
- Til slutt, vis verdien av denne variabelen ' j ' over nettsiden ved å bruke ' indreHTML ' eiendom.
Utdata etter kompileringen av ovenstående vises som:
Utdataene viser at egenskapen for automatisk fullføring av inndata for e-post blir deaktivert og aktivert. Verdien blir også hentet og vist på nettsiden.
Konklusjon
HTML DOM-inndata for autofullføring av e-post oppretter automatisk en liste som inneholder verdiene som brukeren tidligere har skrevet inn i e-postfeltet. Slik at brukeren enkelt kan velge fra tidligere innlagte data og dermed forbedre brukeropplevelsen. Denne egenskapen angis når verdien av ' på ' er tilordnet den og deaktivert når verdien av ' av ” er bestått. Denne bloggen har forklart egenskapen for DOM-inndata for autofullføring av e-post ved hjelp av JavaScript.