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

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

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

简单布局：

  
仿微博登录
  

    
  
  

    
  
  

    
请选择邮箱类型：
    

    
@sina.com
    
@163.com
    
@qq.com
    
@126.com
    
@sina.cn
    
@139.com
  

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指向的问题，通过这个案例好好地理解了下this。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。