Voor het maken van realtime projecten zoals aanmeldingen voor nieuwsbrieven, contactformulieren, afrekenformulieren en gebruikersaanmeldingen, de “ e-mail ' veld is verplicht. De gebruiker moet zijn e-mailadres invoeren om door te gaan of het proces te starten en ook om in te loggen op zijn account. Voor dit doel moet de gebruiker elke keer een e-maillogin opgeven of zich registreren, wat een slechte gebruikerservaring oplevert. Dit probleem is opgelost met behulp van de JavaScript HTML DOM autocomplete-eigenschap.
In deze blog wordt de procedure uitgelegd voor het afhandelen van de HTML DOM-invoer-e-mailautocomplete-eigenschap van JavaScript.
Hoe om te gaan met HTML DOM-invoer voor automatisch aanvullen van e-mail?
De autocomplete-eigenschap van HTML DOM-invoer “ e-mail ”-element, biedt een lijst met de meest recente gegevens die eerder zijn ingevoegd in het “ e-mail ' veld. Hiermee kan een gebruiker zijn e-mailadres uit de lijst kiezen als deze automatisch beschikbaar is.
Syntaxis
De syntaxis voor de eigenschap automatisch aanvullen van DOM-invoer voor e-mail wordt hieronder vermeld:
e-mailObj. automatisch aanvullen = 'aan|uit'
Met de bovenstaande syntaxis wordt de eigenschap autocomplete voor het emailObj-element ingesteld en verwijderd.
e-mailObj. automatisch aanvullen
Deze syntaxis haalt de waarde op van de “ automatisch aanvullen 'eigenschap om te bepalen of deze eigenschap is ingeschakeld of niet.
Laten we een JavaScript-programma hebben voor de eigenschap automatisch aanvullen
Voorbeeld: de waarde van de eigenschap Autocomplete in-, uitschakelen en ophalen
In dit voorbeeld wordt de eigenschap automatisch aanvullen uitgeschakeld, ingeschakeld door deze eigenschap in te stellen op “ op ' En ' uit ”respectievelijk. Vervolgens wordt de huidige waarde van de eigenschap Autocomplete opgehaald:
< lichaam >< centrum >
< h1 stijl = 'kleur: cadetblauw;' > Linux < / h1 >
E-mail: < invoer type = 'e-mail' ID kaart = 'demoE-mail' >
< br >
< br >
< knop bij klikken = 'Uitschakelen()' > Uitgeschakeld < / knop >
< knop bij klikken = 'Iemand die iets mogelijk maakt()' > Iemand die iets mogelijk maakt < / knop >
< h3 ID kaart = 'doel' > < / h3 >
< knop bij klikken = 'Checker()' > Controleur < / knop >
< / centrum >
< script >
functie Uitschakeling() {
document.getElementById('demoEmail').autocomplete = 'uit';
}
functie Enabler() {
document.getElementById('demoEmail').autocomplete = 'aan';
}
functie Controle() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('doel').innerHTML = j;
}
< / script >
< / lichaam >
De uitleg van het bovenstaande codeblok staat hieronder:
- Eerst de ' invoer 'element wordt gemaakt met een type attribuut' e-mail ” om basisvalidatie te accepteren en uit te voeren om er zeker van te zijn dat de ingevoerde gegevens e-mail zijn.
- Vervolgens worden er drie knopelementen gemaakt die de “ Disabler()”, “Enabler()” en “Checker() ” functies.
- Definieer nu de “ Uitgeschakeld ()”-functie door de “ invoer ”-element met behulp van de id en het toewijzen van de waarde van “ uit “voor zijn” automatisch aanvullen ' eigendom.
- In de ' Iemand die iets mogelijk maakt ()” functie, pas dezelfde “ automatisch aanvullen 'eigenschap, maar wijs er nu een waarde van toe' op ”.
- Definieer daarna de “ Controleur ()” functie door alleen “ automatisch aanvullen ” naast de referentie van het invoerelement en sla deze op in de variabele “ J ”.
- Geef uiteindelijk de waarde van deze variabele weer “ J ' via de webpagina met behulp van de ' innerlijkeHTML ' eigendom.
Uitvoer na de compilatie van het bovenstaande wordt weergegeven als:
De uitvoer laat zien dat de eigenschap voor het automatisch aanvullen van invoer-e-mail wordt in- en uitgeschakeld. De waarde ervan wordt ook opgehaald en weergegeven op de webpagina.
Conclusie
De HTML DOM-eigenschap voor het automatisch aanvullen van e-mailinvoer maakt automatisch een lijst met de waarden die de gebruiker eerder in het e-mailveld heeft ingevoerd. Zodat de gebruiker eenvoudig kan kiezen uit eerder ingevoerde gegevens en daarmee de gebruikerservaring verbetert. Deze eigenschap wordt ingesteld als de waarde van “ op ” wordt eraan toegewezen en uitgeschakeld wanneer de waarde van “ uit 'is voorbij. In deze blog wordt de eigenschap automatisch aanvullen van DOM-invoer via JavaScript uitgelegd.