Vor kurzem habe ich JS gut studiert und mein Verständnis von Objektorientierungen durch einen Fall einer gefälschten E-Mail-Anmelde-Eingabed-Box vertieft! Sag nichts, machen wir zuerst ein Foto:
Funktion: Erkennen Sie regelmäßig Übereinstimmungen, um konsistente Inhalte, Tastaturereignisse und Mausereignisse anzuzeigen
Einfaches Layout:
<div id="login"> <h2>Imitation Weibo Login</h2> <div> <input type="text" placeholder='email/member account/mobile phone number' autocomplete='off' class='name' id='nameInput' maxlength='18'> </div> <div> <input type="password" placeholder='Please enter password' autocomplete='off' class='password'> </div> <ul id='suggest'> <li>Please select the email type: </li> <li email=""></li> <li email="@sina.com">@sina.com</li> <li email="@163.com">@163.com</li> <li email="@qq.com">@qq.com</li> <li email="@126.com">@126.com</li> <li E -Mail = "@Sina.cn">@Sina.cn </li> <li E -Mail = "@139.com">@139.com </li> </ul> </div>
CSS -Code:
Körper, ul, li, H2 {Margin: 0; Padding: 0; Farbe: #ccc;} ul {Listenstil-Typ: None;}#Login {width: 250px; Hintergrund: #fff; Grenze: 1px solide #ccc; text-align: center; margin: 10px auto; Position: relativ;}#Login; H2 {Hintergrund:#fa7d3c; Farbe: #fff; Zeilenhöhe: 40px; } .detail {}. Detaileingabe {width: 220px; Höhe: 30px; Rand: 10px auto; border: 1px solid #ccc; padding-links: 5px;} #Vorschlag {Breite: 225px; Höhe: auto; Keine;}#Vorschlagen li {width: 225px; Höhe: 25px; text-align: links;JS -Code:
window.onload = function () {var s1 = new sugge (); s1.init ();}; Funktion vorschläge () {this.oinput = document.getElementById ('nameInput'); this.oul = document.getElementById ('sugge'); this.ali = this.oul.getElementsByTagName ('li');} sugger.prototype = {init: function () {this.tonchange (); this.telblur (); }, tochange: function () {// dh: onPropertychange // Standard: onInput /*wie man den kürzesten IE-Browser beurteilen: var isie =!-[1,]* /var ie =!-[1,]; // speichern Sie dieses Zeigen, dieses Zeigeproblem var dies = this; if (dh) {this.oinput.onpropertychange = function () {if (this.oinput.value == '') {this.tips (); //? } This.showul (); This.tips (); This.sel (1); // Wählen Sie das erste Element}; } else {this.oinput.oninput = function () {this.showul (); This.tips (); Diese. }, Toblur: function () {var this = this; this.oinput.onblur = function () {this.oul.style.display = 'none'; }}, tipps: function () {var value = this.oinput.Value; // reguläre Übereinstimmung var re = new regexp ('@'+value.substring (value.indexof ('@')+1)+''); // console.log (re); // Fehlerbehebung: Alle Inhalte werden sofort gelöscht und dennoch aufgefordert (var i = 1; i <this.ali.length; i ++) {this.ali [i] .style.display = 'block'; } if (re.Test (value)) {// übereinstimmen mit der Situation nach @ Eingabe für (var i = 1; i <this.ali.length; i ++) {var oemail = this.ali [i] .getAttribute ('E -Mail'); if (i == 1) {this.ali [i] .innerhtml = Wert; } else {if (re.Test (Oemail)) {// Das Match wird angezeigt, ansonsten verstecken Sie dies. } else {this.ali [i] .style.display = 'none'; }}}} else {// bevor @ ist für (var i = 1; i <this.ali.length; i ++) {var oemail = this.ali [i] .getAtTribute ('E -Mail') eingegeben; if (! Oemail) {this.ali [i] .innerhtml = Wert; } else {this.ali [i] .innerhtml = value+oemail; }}}}}, sel: function (INOW) {// Pause den aktuellen Index var this = this; // Jedes Mal, wenn Sie den Reset -Typ ändern, wird er nicht wiederholt für (var i = 1; i <this.ali.Length; i ++) {this.ali [i] .classname = 'item'; } if (this.oinput.Value == '') {this.ali [Inow] .ClassName = 'item'; } else {this.ali [Inow] .ClassName = 'Active'; } für (var i = 1; i <this.ali.length; i ++) {this.ali [i] .Index = i; this.ali [i] .onmouseover = function () {für (var i = 1; i <this.ali.length; i ++) {this.ali [i] .classname = 'item'; } this.className = 'active'; Inow = this.index; // aktueller Index}; // Mausklickereignis: this.ali [i] .onmouseDown = function () {this.oinput.Value = this.innerHtml; }} // Tastaturereignis: this.oinput.onkeydown = Funktion (e) {var e = e || window.event; if (e.keyCode == 38) {// on if (Inow == 1) {Inow = this.ali.length-1; } else {Inow--; } für (var i = 1; i <this.ali.length; i ++) {this.ali [i] .className = 'item'; } This.ali [Inow] .className = 'Active'; } else if (e.keyCode == 40) {// if (Inow == this.ali.Length-1) {Inow = 1; } else {Inow ++; } für (var i = 1; i <this.ali.length; i ++) {this.ali [i] .className = 'item'; } This.ali [Inow] .className = 'Active'; } else if (e.keycode == 13) {// Geben Sie this.oinput.value = this.ali [Inow] .InnerHtml; This.oinput.blur (); // das Blur -Ereignis nach Eingabe und ausgeblasen Sie die UL -Schicht}}}}Wir müssen uns mit mehreren Zweigen und kleinen Details befassen. Wir sind auch der Meinung, dass dies häufig in objektorientierten Problemen auftritt. In diesem Fall haben wir ein gutes Verständnis dafür.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.