Für die Erstellung von Echtzeitprojekten wie Newsletter-Anmeldungen, Kontaktformularen, Checkout-Formularen und Benutzeranmeldungen ist das „ Email ”-Feld ist erforderlich. Der Benutzer muss seine E-Mail-Adresse eingeben, um den Vorgang fortzusetzen oder zu starten, und sich außerdem in sein Konto einloggen. Zu diesem Zweck muss der Benutzer jedes Mal ein E-Mail-Login bereitstellen oder sich registrieren, was zu einer schlechten Benutzererfahrung führt. Dieses Problem wird mithilfe der JavaScript-HTML-DOM-Autovervollständigungseigenschaft behoben.
In diesem Blog wird die Vorgehensweise zum Umgang mit der Eigenschaft der automatischen Vervollständigung von HTML-DOM-Eingabe-E-Mails in JavaScript erläutert.
Wie gehe ich mit der Eigenschaft zur automatischen Vervollständigung von HTML-DOM-Eingabe-E-Mails um?
Die Autocomplete-Eigenschaft der HTML-DOM-Eingabe „ Email ”-Element, stellt eine Liste mit den neuesten Daten bereit, die zuvor in das „ Email ' Feld. Es ermöglicht einem Benutzer, seine E-Mail aus der Liste auszuwählen, wenn diese automatisch verfügbar ist.
Syntax
Die Syntax für die Eigenschaft zur automatischen Vervollständigung von DOM-Eingabe-E-Mails ist unten angegeben:
emailObj. automatische Vervollständigung = „an|aus“
Die obige Syntax legt die Autocomplete-Eigenschaft für das emailObj-Element fest und entfernt sie.
emailObj. automatische Vervollständigung
Diese Syntax ruft den Wert von „ ab. automatische Vervollständigung ”-Eigenschaft, um herauszufinden, ob diese Eigenschaft aktiviert ist oder nicht.
Lassen Sie uns ein JavaScript-Programm für die Autovervollständigungseigenschaft haben
Beispiel: Aktivieren, Deaktivieren und Abrufen des Werts der Autocomplete-Eigenschaft
In diesem Beispiel wird die Autovervollständigungseigenschaft deaktiviert und aktiviert, indem diese Eigenschaft auf „ An ' Und ' aus ' jeweils. Anschließend wird der aktuelle Wert der Autocomplete-Eigenschaft abgerufen:
< Körper >< Center >
< h1 Stil = „Farbe: Kadettenblau;“ > Linux < / h1 >
Email: < Eingang Typ = 'Email' Ausweis = „demoEmail“ >
< br >
< br >
< Taste onclick = „Disabler()“ > Disabler < / Taste >
< Taste onclick = 'Möglichmacher()' > Möglichmacher < / Taste >
< h3 Ausweis = 'Ziel' > < / h3 >
< Taste onclick = „Checker()“ > Checker < / Taste >
< / Center >
< Skript >
Funktion Disabler() {
document.getElementById('demoEmail').autocomplete = 'off';
}
Funktion Enabler() {
document.getElementById('demoEmail').autocomplete = 'on';
}
Funktion Checker() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / Skript >
< / Körper >
Die Erklärung des obigen Codeblocks ist unten aufgeführt:
- Zuerst die ' Eingang „Element wird mit einem Attributtyp erstellt“ Email ” um eine grundlegende Validierung zu akzeptieren und durchzuführen, um sicherzustellen, dass die eingegebenen Daten per E-Mail übermittelt werden.
- Als nächstes werden drei Schaltflächenelemente erstellt, die das „ Disabler()“, „Enabler()“ und „Checker()“ ”Funktionen.
- Definieren Sie nun „ Disabler ()“-Funktion durch Auswahl der Option „ Eingang ”-Element unter Verwendung seiner ID und Zuweisung des Werts von „ aus ” für seine „ automatische Vervollständigung ' Eigentum.
- Im ' Möglichmacher ()“-Funktion, wenden Sie dasselbe an „ automatische Vervollständigung ”-Eigenschaft, aber weisen Sie ihr jetzt den Wert „ zu An “.
- Definieren Sie anschließend „ Checker ()“-Funktion durch Hinzufügen von nur „ automatische Vervollständigung ” neben der Referenz des Eingabeelements und speichern Sie es in der Variablen „ J “.
- Zeigen Sie am Ende den Wert dieser Variablen an „ J ” über die Webseite mit dem „ innerHTML ' Eigentum.
Die Ausgabe nach der Kompilierung des oben Gesagten wird wie folgt angezeigt:
Die Ausgabe zeigt, dass die Eigenschaft zur automatischen Vervollständigung der Eingabe-E-Mail deaktiviert und aktiviert wird. Sein Wert wird ebenfalls abgerufen und auf der Webseite angezeigt.
Abschluss
Die Eigenschaft zur automatischen Vervollständigung von HTML-DOM-Eingabe-E-Mails erstellt automatisch eine Liste mit den Werten, die der Benutzer zuvor in das E-Mail-Feld eingegeben hat. Dadurch kann der Benutzer problemlos aus seinen zuvor eingegebenen Daten auswählen und verbessert so das Benutzererlebnis. Diese Eigenschaft wird gesetzt, wenn der Wert von „ An ” wird ihm zugewiesen und deaktiviert, wenn der Wert von „ aus ' ist bestanden. In diesem Blog wurde die Eigenschaft zur automatischen Vervollständigung von DOM-Eingabe-E-Mails durch JavaScript erläutert.