Natives JS zur Implementierung der E-Mail-Eingabeaufforderung im Anmeldefeld

Natives JS zur Implementierung der E-Mail-Eingabeaufforderung im Anmeldefeld

Dieser Artikel beschreibt eine native JS-Implementierung einer Dropdown-Eingabeaufforderung bei der Eingabe einer E-Mail-Adresse während der Registrierung oder Anmeldung. Der Effekt ist wie folgt:

Der Implementierungscode lautet wie folgt:

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS zur Implementierung der Anmeldefeld-Eingabeaufforderung</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
 
        Körper {
            Schriftart: 12px/1.125 Arial, Helvetica, serifenlos;
        }
 
        li {
            Listenstil: keiner;
        }
 
        #Anmeldung {
            Breite: 252px;
            Höhe: 385px;
            /* Farbiges Hintergrundbild */
            Hintergrund: URL (Bilder/0.jpg) keine Wiederholung;
            Rand: 20px automatisch;
            Position: relativ;
        }
 
        .detail {
            Rand: 0 0 5px 30px;
            Position: relativ;
            oben: 110px;
        }
 
        .detail Eingabe {
            Farbe: #999999;
            Rand: 1px durchgezogen #74C8E5;
            Rahmenradius: 3px 3px 3px 3px;
            Höhe: 15px;
            Zeilenhöhe: 14px;
            Polsterung: 8px 5px 7px;
            Breite: 184px;
        }
 
        #vorschlagen {
            Hintergrund: keine Wiederholung, Scrollen 0 0 #FFFFFF;
            Rand: 1px durchgezogen #CCCCCC;
            links: 30px;
            Rand: 0;
            Überlauf: versteckt;
            Polsterung: 0;
            Position: absolut;
            Textausrichtung: links;
            oben: 142px;
            Sichtbarkeit: sichtbar;
            Breite: 194px;
            Z-Index: 1;
            Anzeige: keine;
        }
 
        .Notiz,
        .Artikel {
            klar: beides;
            Farbe: #999999;
            Cursor: Zeiger;
            Schriftgröße: 12px;
            Höhe: 20px;
            Zeilenhöhe: 20px;
            Listenstil: keiner außerhalb von keinem;
            Rand: 0 1px;
            Polsterung: 0,5px;
            Leerzeichen: Nowrap;
        }
 
        .aktiv {
            Leerzeichen: Nowrap;
            klar: beides;
            Farbe: rgb(153, 153, 153);
            Cursor: Zeiger;
            Schriftgröße: 12px;
            Höhe: 20px;
            Zeilenhöhe: 20px;
            Listenstil: keiner außerhalb von keinem;
            Rand: 0pt 1px;
            Polsterung: 0pt 5px;
            Hintergrund: keine Wiederholung, Scrollen, 0 % 0 % rgb(232, 244, 252);
        }
    </Stil>
    <Skript>
 
        //Wenn die Seite geladen ist window.onload = function () {
            //Konstruktor erstellen var s1 = new Suggest();
            //s1.init() initialisieren;
        };
 
        //Konstruktorfunktion Suggest() {
            //Das Eingabefeld für den Benutzernamen abrufen this.oInput = document.getElementById('input1');
            //Das Dropdown-Listen-Eingabeaufforderungsfeld abrufen this.oUl = document.getElementById('suggest');
            //Dropdown-Listenelement abrufen this.aLi = this.oUl.getElementsByTagName('li');
        }
 
        //Prototype-Methode zum Konstruktor hinzufügen Suggest.prototype = {
            // Initialisierung init: function () {
                //Wenn sich die Eingabe ändert this.toChange();
                //Wenn der Cursor wegbewegt wird this.toBlur();
            },
            //Wenn die Kante weiterhin Änderungen auslöst toChange: function () {
 
                //Fügen Sie kontinuierliche Eingabeereignisse hinzu und machen Sie sie mit allen Browsern kompatibel var ie = !-[1,];
                var Dies = dies;
 
                wenn (dh) {
                    dies.oInput.onpropertychange = Funktion () {
                        //Verhindern Sie, dass das Dropdown-Eingabeaufforderungsfeld ausgelöst wird, wenn der Eingabewert im IE leer ist, if (This.oInput.value == '') {
                            Diese.tipps();
                            zurückkehren;
                        }
                        //Dropdown-Listenfeld anzeigen This.thowUl();
                        //Tipps anzeigenThis.tips();
                        //Standardauswahl bei inputThis.sel(0);
                    };
                } anders {
                    dies.oInput.oninput = Funktion () {
                        //Dropdown-Listenfeld anzeigen This.thowUl();
                        //Tipps anzeigenThis.tips();
                        //Standardauswahl bei inputThis.sel(0);
                    };
                }
            },
            //Dropdown-Listenfeld anzeigen thowUl: function () {
                dies.oUl.style.display = "Block";
            },
            //Wenn der Cursor wegbewegt wird, wird das Dropdown-Anzeigefeld ausgeblendet toBlur: function () {
                var Dies = dies;
                dies.oInput.onblur = Funktion () {
                    This.oUl.style.display = "keine";
                };
            },
 
            //Bei der Eingabe ändert sich der Platz innerhalb der Eingabeaufforderung entsprechend Tipps: Funktion () {
                var Wert = this.oInput.Wert;
 
                //Definieren Sie den regulären Ausdruck für das Postfach (@ plus der nach @ eingegebene Wert plus ein Leerzeichen)
                var re = neuer RegExp('@' + Wert.Teilzeichenfolge(Wert.IndexOf('@') + 1) + '');
 
                //Dropdown-Liste initialisieren //Verhindern, dass die Dropdown-Liste angezeigt wird, nachdem die Eingabe gelöscht wurde for (var i = 1; i < this.aLi.length; i++) {
                    dies.aLi[i].style.display = "Block";
                    dies.aLi[i].bBtn = wahr;
                }
 
                wenn (re.test(Wert)) {
                    //Holen Sie sich die benutzerdefinierten Attribute aller li (außer dem ersten)
                    für (var i = 1; i < this.aLi.length; i++) {
                        var oEmail = this.aLi[i].getAttribute('email');
                        //Weist dem ersten ausgewählten li direkt einen Wert zu, wenn (i == 1) {
                            // Weise den Eingabewert li zu
                            this.aLi[i].innerHTML = Wert;
 
                        } anders {
                            wenn (erneut testen(oEmail)) {
                                dies.aLi[i].style.display = "Block";
                                dies.aLi[i].bBtn = wahr;
                            } anders {
                                dies.aLi[i].style.display = "keine";
                                dies.aLi[i].bBtn = falsch;
                            }
                        }
                    }
                } anders {
                    //Holen Sie sich die benutzerdefinierten Attribute aller li (außer dem ersten)
                    für (var i = 1; i < this.aLi.length; i++) {
                        var oEmail = this.aLi[i].getAttribute('email');
                        //Wenn der erhaltene oEmail-Wert leer ist, ist dies das erste Mal, wenn (!oEmail) {
                            // Weise den Eingabewert li zu
                            this.aLi[i].innerHTML = Wert;
                        } anders {
                            //Der Inhalt von li ist der Eingabewert plus sein Attributwert this.aLi[i].innerHTML = value + oEmail;
                        }
                    }
                }
            },
            //Methode zur Eingabeaufforderung für Listenelemente sel: function (iNow) {
 
                var Dies = dies;
                var arr = [];
 
                //Nachdem Sie eine Eingabeaufforderung ausgewählt haben und erneut eingeben, stellen Sie das ausgewählte Element auf den Standardstil für (var i = 1; i < this.aLi.length; i++) { zurück.
                    dies.aLi[i].className = "Artikel";
                    wenn (diese.aLi[i].bBtn) {
                        arr.push(dies.aLi[i]);
                    }
                }
 
                //Wenn der Eingabeinhalt leer ist if (this.oInput.value == '') {
                    //Stil ist Artikel
                    arr[iNow].className = "Artikel";
                    //Wenn der Eingabeinhalt nicht leer ist} else {
                    //Stil ist aktiv
                    arr[iNow].className = "aktiv";
                }
 
 
                //Mausbewegungsereignis zu allen Dropdown-Tipps hinzufügen für (var i = 1; i < arr.length; i++) {
                    arr[i].index = i;
                    //Wenn die Maus in arr[i].onmouseover = function () { bewegt wird
                        //Stelle die Stile aller li auf den Standardstil für (var i = 1; i < This.aLi.length; i++) { zurück.
 
                            Dies.aLi[i].className = "Artikel";
                        }
                        //Stil der aktuellen Option als aktiv hinzufügen
                        this.className = "aktiv";
                        iNow = dieser.index;
                    };
 
                    //Wenn mit der Maus geklickt wird, ersetzen Sie den aktuellen Inhalt der Eingabeaufforderungsoption durch den Eingabewert arr.onmousedown = function () {
                        Dies.oInput.value = dieses.innerHTML;
                    };
                }
 
                //Tastaturereignis hinzufügen document.onkeydown = function (ev) {
                    // Mache das Ereignis kompatibel var ev = ev || window.event;
                    // wenn (ev.keyCode == 38) {
                        wenn (iNow == 0) {
                            iNow = arr.Länge - 1;
                        } anders {
                            ichJetzt--;
                        }
                        für (var i = 1; i < This.aLi.length; i++) {
                            Dies.aLi[i].className = "Artikel";
                        }
                        arr[iNow].className = "aktiv";
                        //Weiter} sonst wenn (ev.keyCode == 40) {
                        //Wenn iNow das letzte ist, weisen Sie ihm den Wert 0 zu
                        wenn (iNow == arr.length - 1) {
                            iJetzt = 0;
                        } anders {
                            iJetzt++;
                        }
                        // Alle Li-Stile auf den Standardstil zurücksetzen für (var i = 1; i < This.aLi.length; i++) {
                            Dies.aLi[i].className = "Artikel";
                        }
                        //Der aktuellen Option aktiven Stil hinzufügen arr[iNow].className = 'active';
                        //Eingeben} sonst wenn (ev.keyCode == 13) {
                        //Ersetze den aktuellen Inhalt der Eingabeaufforderungsoption durch den Eingabewert This.oInput.value = arr[iNow].innerHTML;
                        //Bewegen Sie den Cursor vom Eingabefeld weg und schließen Sie das Dropdown-Listenelement. This.oInput.blur();
                    }
                };
 
            }
        };
    </Skript>
</Kopf>
 
<Text>
    <div id="Anmelden">
 
        <div Klasse="Detail">
            <input id="input1" type="text" maxlength="128" placeholder="E-Mail/Mitgliedskonto/Mobiltelefonnummer" autocomplete="off"
                Knotentyp="Anmeldename" Klasse="Name" Tabindex="1" Name="Anmeldename">
        </div>
 
        <div Klasse="Detail">
            <input type="password" maxlength="24" placeholder="Bitte geben Sie Ihr Passwort ein" node-type="password" class="pass" tabindex="2"
                name="passwort">
        </div>
 
        <ul id="vorschlagen">
            <li class="note">Bitte wählen Sie den E-Mail-Typ aus</li>
            <li E-Mail="" Klasse="Artikel"></li>
            <li email="@sina.com" class="item">@sina.com</li>
            <li email="@163.com" class="item">@163.com</li>
            <li email="@qq.com" class="item">@qq.com</li>
            <li email="@126.com" class="item">@126.com</li>
            <li email="@vip.sina.com" class="item">@vip.sina.com</li>
            <li email="@sina.cn" class="item">@sina.cn</li>
            <li email="@hotmail.com" class="item">@hotmail.com</li>
            <li email="@gmail.com" class="item">@gmail.com</li>
            <li email="@sohu.com" class="item">@sohu.com</li>
            <li email="@yahoo.cn" class="item">@yahoo.cn</li>
            <li email="@139.com" class="item">@139.com</li>
            <li email="@wo.com.cn" class="item">@wo.com.cn</li>
            <li E-Mail="@189.cn" Klasse="Artikel">@189.cn</li>
        </ul>
    </div>
</body>
 
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Javascript um den Drag-Effekt der Login-Box zu erreichen
  • js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster
  • js realisiert den Mauszeigereffekt des Anmeldefelds
  • js realisiert den Mauszeigereffekt des Baidu-Anmeldefelds
  • Native js realisiert den ziehbaren Anmeldefeldeffekt
  • js realisiert den Effekt des Ausblendens des Anmeldefelds, wenn das Kontrollkästchen die anonyme Anmeldung auswählt

<<:  Verwenden von Streaming-Abfragen in MySQL, um Daten-OOM zu vermeiden

>>:  Tutorial zu HTML-Tabellen-Tags (32): Attribut für horizontale Zellenausrichtung ALIGN

Artikel empfehlen

JavaScript-Grundlagen: Funktion zur sofortigen Ausführung

Inhaltsverzeichnis Funktionsformat sofort ausführ...

Studiennotizen zur MySQL Master-Slave-Konfiguration

● Ich hatte vor, einige Cloud-Daten zu kaufen, um...

Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS 1. Verständnis und Kenntnisse von WE...

Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt

Heute werde ich ein kleines Javascript-Animations...

Vue verwendet E-Charts, um ein Organigramm zu zeichnen

Gestern habe ich einen Blog über den kreisförmige...

So installieren Sie MySQL und MariaDB in Docker

Beziehung zwischen MySQL und MariaDB Das Datenban...

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

Heute verwenden wir Uniapp, um Echarts zur Anzeig...

Interaktive Erlebnistrends, die 2015-2016 zum Mainstream werden

Der wichtigste Artikel zum interaktiven Design im...

Beispiel für die Bereitstellung von Spring Boot mit Docker

Hier verwenden wir hauptsächlich Spring-Boot, das...

Lassen Sie uns darüber sprechen, was das URL-Objekt von JavaScript ist

Inhaltsverzeichnis Überblick Hash-Eigenschaften G...