最近在好好的研究JS,通過一個仿郵箱登錄提示框的案例加深下對面向對象的理解!啥都別說,先上圖:
功能:實現正則匹配顯示相符的內容、鍵盤事件、鼠標事件
簡單布局:
<div id="login"> <h2>仿微博登錄</h2> <div class="detail"> <input type="text" placeholder='郵箱/會員賬號/手機號' autocomplete='off' class='name' id='nameInput' maxlength='18'> </div> <div class="detail"> <input type="password" placeholder='請輸入密碼' autocomplete='off' class='password'> </div> <ul id='suggest'> <li class="note">請選擇郵箱類型:</li> <li class="item" email=""></li> <li class="item" email="@sina.com">@sina.com</li> <li class="item" email="@163.com">@163.com</li> <li class="item" email="@qq.com">@qq.com</li> <li class="item" email="@126.com">@126.com</li> <li class="item" email="@sina.cn">@sina.cn</li> <li class="item" email="@139.com">@139.com</li> </ul> </div>
CSS代碼:
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:#fff;border:1px solid #ccc;position:absolute;top:84px;left:12px;display: none;} #suggest li{width:225px;height:25px;line-height:25px;text-align: left;cursor: pointer;} #suggest li.note{color:#989090;} #suggest li.active{background:#eee;}
JS代碼:
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 //標准:oninput /*判斷IE浏覽器最短方法:var isIE = !-[1,]*/ var ie=!-[1,]; //存this指向,this指向問題 var This=this; if(ie){ this.oInput.onpropertychange=function(){ if(This.oInput.value==''){ This.tips();//?解決ie下空值時li新增內容不置空情況 return; } This.showUl(); This.tips(); This.sel(1);//選中第一條 }; }else{ this.oInput.oninput=function(){ This.showUl(); This.tips(); This.sel(1);//選中第一條 } } }, 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; //正則匹配 var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+''); // console.log(re); //bug修復:全部內容一次性清空仍可出現提示 for(var i=1;i<this.aLi.length;i++){ this.aLi[i].style.display='block'; } if(re.test(value)){//匹配@輸入後情況 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)){//匹配項顯示,否則隱藏 this.aLi[i].style.display='block'; }else{ this.aLi[i].style.display='none'; } } } }else{//未輸入@之前 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){//傳入當前索引 var This=this; //每次改變重新設置類型,不會重復 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;//當前索引 }; //鼠標點擊事件: this.aLi[i].onmousedown=function(){ This.oInput.value=this.innerHTML; } } //鍵盤事件: this.oInput.onkeydown=function(e){ var e=e||window.event; if(e.keyCode==38){//上 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){//回車 This.oInput.value=This.aLi[iNow].innerHTML; This.oInput.blur();//回車後觸發blur事件隱藏ul層 } } } }
需要處理好多個分支情況,處理好小細節,也感覺面向對象中比較常遇到是this指向的問題,通過這個案例好好地理解了下this。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。