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