Récemment, j'ai bien étudié JS et approfondis ma compréhension des objets à travers un cas de fausse boîte d'invite de connexion par e-mail! Ne dis rien, prenons d'abord une photo:
Fonction: Réalisez une correspondance régulière pour afficher un contenu cohérent, des événements de clavier et des événements de souris
Disposition simple:
<div id = "Login"> <h2> imitation weibo login </h2> <v> <input type = "text" placeholder = 'e-mail / compte membre / numéro de téléphone mobile' Auto-Aompletee = 'OFF' class = 'name' id = 'nameInput' maxLength = '18 '> </ div> <div> <up type = "mot de passe" PlaceHolder =' s'il vous plaît entrez un mot de passe </div> <ul id = 'suggère'> <li> Veuillez sélectionner le type de messagerie: </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 e-mail = "@ 126.com"> @ 126.com </ li> <li> <li e-mail = "@ 126.com"> @ 126.com </ li> <li> <li e-mail = "@ 126.com"> @ 126.com </ li> <li> <li e-mail = "@ 12c email = "@ sina.cn"> @ sina.cn </li> <li email = "@ 139.com"> @ 139.com </li> </ul> </div>
Code CSS:
Body, ul, li, h2 {margin: 0; padding: 0; couleur: #ccc;} ul {list-style-type: Aucun;} # ligin {width: 250px; fond: #fff; bord H2 {fond: # fa7d3c; couleur: #fff; line-height: 40px; } .detail {}. Entrée détaillée {largeur: 220px; hauteur: 30px; marge: 10px auto; bordure: 1px solide #ccc; padding-left: 5px;} # suggère {width: 225px; hauteur: auto; arrière Aucun;} # suggère li {width: 225px; height: 25px; text-align: Left; cursor: pointer;} # suggère li.note {couleur: # 989090;} # suggère li.active {background: #eee;}Code js:
window.onload = function () {var s1 = new suggère (); s1.init ();}; fonction suggère () {this.oinput = document.getElementById ('nameInput'); this.oul = document.getElementById ('suggère'); this.ali = this.oul.getElementsByTagName ('li');} suggère.prototype = {init: function () {this.tochange (); this.toblur (); }, tochange: function () {// ie: onProperTyChange // standard: onInput / * comment juger le navigateur IE le plus court: var isie =! - [1,] * / var ie =! - [1,]; // Enregistrer ce pointage, ce problème de pointage var ceci = this; if (ie) {this.oinput.onpropertyChange = function () {if (this.oinput.value == '') {this.tips (); //? Résoudre la situation d'ajout de nouveau contenu à Li lorsque la valeur nul est sous IE return; } This.showul (); This.tips (); This.sel (1); // sélectionnez le premier élément}; } else {this.oinput.oninput = function () {this.showul (); This.tips (); This.sel (1); // sélectionnez le premier élément}}}, showul: function () {this.oul.style.display = 'block'; }, toblur: function () {var this = this; this.oinput.onblur = function () {this.oul.style.display = 'Aucun'; }}, TIPS: function () {var valeur = this.oinput.value; // match régulier var re = new regexp ('@' + value.substring (value.indexof ('@') + 1) + ''); // console.log (re); // correction de bug: tous les contenus sont effacés immédiatement et toujours invités à (var i = 1; i <this.ali.length; i ++) {this.ali [i] .style.display = 'block'; } if (re.Test (value)) {// correspond à la situation après @ entrée pour (var i = 1; i <this.ali.length; i ++) {var oemail = this.ali [i] .getAttribute ('email'); if (i == 1) {this.ali [i] .InnerHtml = valeur; } else {if (re.test (oemail)) {// Le match est affiché, sinon masquer ce.ali [i] .style.display = 'block'; } else {this.ali [i] .style.display = 'Aucun'; }}}} else {// avant @ est entré pour (var i = 1; i <this.ali.length; i ++) {var oemail = this.ali [i] .getAttribute ('email'); if (! oEmail) {this.ali [i] .InnerHtml = valeur; } else {this.ali [i] .InnerHtml = valeur + oemail; }}}}}, sel: function (inow) {// pause l'index actuel var ceci = this; // Chaque fois que vous modifiez le type de réinitialisation, il ne sera pas répété pour (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'; } pour (var i = 1; i <this.ali.length; i ++) {this.ali [i] .index = i; this.ali [i] .onMouseOver = function () {for (var i = 1; i <this.ali.length; i ++) {this.ali [i] .classname = 'item'; } this.classname = 'actif'; inow = this.index; // index actuel}; // Événement de clic de souris: this.ali [i] .onmousedown = function () {this.oinput.value = this.innerhtml; }} // Événement du clavier: this.oinput.onkeydown = function (e) {var e = e || window.event; if (e.KeyCode == 38) {// sur if (inow == 1) {inow = this.ali.length-1; } else {inow--; } pour (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 ++; } pour (var i = 1; i <this.ali.length; i ++) {this.ali [i] .classname = 'item'; } This.ali [inow] .classname = 'active'; } else if (e.KeyCode == 13) {// Entrez ce.oinput.value = this.ali [inow] .InnerHtml; This.oinput.blur (); // déclenchez l'événement Blur après être entré et masqué la couche UL}}}}Nous devons faire face à plusieurs branches et petits détails. Nous pensons également que cela est souvent rencontré dans des problèmes axés sur les objets. À travers ce cas, nous avons une bonne compréhension de cela.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.