Recently, I have been studying JS well and deepening my understanding of object-oriented through a case of a fake email login prompt box! Don't say anything, let's take a picture first:
Function: Realize regular matching to display consistent content, keyboard events, and mouse events
Simple 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 email="@sina.cn">@sina.cn</li> <li email="@139.com">@139.com</li> </ul></div>
CSS code:
body,ul,li,h2{margin:0;padding:0;color:#ccc;}ul{list-style-type: none;}#login{width:250px;background:#fff;border:1px solid #ccc;text-align: center;margin:10px auto;position:relative;}#login h2{background:#FA7D3C;color:#fff;line-height:40px; }.detail{}.detail input{width:220px;height:30px;margin:10px auto;border:1px solid #ccc;padding-left:5px;}#suggest{width:225px;height:auto;background:#ffff;border:1px solid #ccc;position:absolute;top:84px;left:12px;display: none;}#suggest li{width:225px;height:25px;text-align: left;cursor: pointer;}#suggest li.note{color:#989090;}#suggest li.active{background:#eee;}JS code:
window.onload=function(){ var s1=new Suggest(); s1.init();};function Suggest(){ this.oInput=document.getElementById('nameInput'); this.oUl=document.getElementById('suggest'); this.aLi=this.oUl.getElementsByTagName('li');}Suggest.prototype={ init:function(){ this.toChange(); this.toBlur(); }, toChange:function(){ //ie: onpropertychange //Standard: oninput /*How to judge the shortest IE browser: var isIE = !-[1,]*/ var ie=!-[1,]; //Save this pointing, this pointing problem var This=this; if(ie){ this.oInput.onpropertychange=function(){ if(This.oInput.value==''){ This.tips();//?Solve the situation of adding new content to li when null value is under ie return; } This.showUl(); This.tips(); This.sel(1);//Select the first item}; }else{ this.oInput.oninput=function(){ This.showUl(); This.tips(); This.sel(1);//Select the first item} } }, showUl:function(){ this.oUl.style.display='block'; }, toBlur:function(){ var This=this; this.oInput.onblur=function(){ This.oUl.style.display='none'; } }, tips:function(){ var value=this.oInput.value; //Regular match var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+''); // console.log(re); //bug fix: All contents are cleared at once and still prompted for(var i=1;i<this.aLi.length;i++){ this.aLi[i].style.display='block'; } if(re.test(value)){//Match the situation after @ input for(var i=1;i<this.aLi.length;i++){ var oEmail=this.aLi[i].getAttribute('email'); if(i==1){ this.aLi[i].innerHTML=value; }else{ if(re.test(oEmail)){//The match is displayed, otherwise hide this.aLi[i].style.display='block'; }else{ this.aLi[i].style.display='none'; } } } }else{//Before @ is entered for(var i=1;i<this.aLi.length;i++){ var oEmail=this.aLi[i].getAttribute('email'); if(!oEmail){ this.aLi[i].innerHTML=value; }else{ this.aLi[i].innerHTML=value+oEmail; } } } } }, sel:function(iNow){//Pause the current index var This=this; //Every time you change the reset type, it will not be repeated for(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'; } for(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='active'; iNow=this.index;//Current index}; //Mouse click event: this.aLi[i].onmousedown=function(){ This.oInput.value=this.innerHTML; } } //Keyboard event: this.oInput.onkeydown=function(e){ var e=e||window.event; if(e.keyCode==38){//On if(iNow==1){ iNow=This.aLi.length-1; }else{ iNow--; } for(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++; } for(var i=1;i<This.aLi.length;i++){ This.aLi[i].className='item'; } This.aLi[iNow].className='active'; }else if(e.keyCode==13){//Enter This.oInput.value=This.aLi[iNow].innerHTML; This.oInput.blur();//Trigger the blur event after entering and hide the ul layer} }}}We need to deal with multiple branches and small details. We also feel that this is often encountered in object-oriented problems. Through this case, we have a good understanding of this.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.