一个仿微博登陆邮箱提示框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>

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;}

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层      }    }  }}