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

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

功能：

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

简单布局：

rush:xhtml;">

仿微博登录

CSS代码：

rush: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代码：

<div class="jb51code">
<pre class="brush: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修复：全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>一次性清空仍可出现<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>
for(var i=1;i<this.aLi.length;i++){
  this.aLi[i].style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play='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)){//匹配项<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>，否则隐藏
        this.aLi[i].style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play='block';
      }else{
        this.aLi[i].style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play='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[i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>].className='item';
}else{
  this.aLi[i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>].className='active';
}

for(var i=1;i<this.aLi.length;i++){
  this.aLi[i].index=i;
  this.aLi[i].onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver=function(){
    for(var i=1;i<This.aLi.length;i++){
      This.aLi[i].className='item';
    }
    this.className='active';
    i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=this.index;//当前索引
  };
  //鼠标点击事件：
  this.aLi[i].onmousedown=function(){
    This.oInput.value=this.innerHTML;
  }
}
//<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>事件：
this.oInput.onkeydown=function(e){
  var e=e||window.event;
  if(e.keyCode==38){//上

    if(i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>==1){
      i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=This.aLi.length-1;
    }else{
      i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>--;
    }
    for(var i=1;i<This.aLi.length;i++){
      This.aLi[i].className='item';
    }
    This.aLi[i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>].className='active';

  }else if(e.keyCode==40){//下

    if(i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>==This.aLi.length-1){
      i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=1;
    }else{
      i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>++;
    }
    for(var i=1;i<This.aLi.length;i++){
      This.aLi[i].className='item';
    }
    This.aLi[i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>].className='active';

  }else if(e.keyCode==13){//回车
    This.oInput.value=This.aLi[i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>].innerHTML;
    This.oInput.blur();//回车后触发blur事件隐藏ul层
  }
}

}

}