一个仿微博登陆邮箱提示框js开发案例

最近在好好的研究JS，通过一个仿邮箱登录提示框的案例加深下对面向对象的理解！啥都别说，先上图：

功能：实现正则匹配显示相符的内容、键盘事件、鼠标事件

简单布局：

<div> <h2>仿微博登录</h2> <div> <input type="text" placeholder='邮箱/会员账号/手机号' autocomplete='off' maxlength='18'> </div> <div> <input type="password" placeholder='请输入密码' autocomplete='off'> </div> <ul> <li>请选择邮箱类型：</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代码：

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。