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

 更新时间:2016年07月28日 17:28:46   作者:macanfa  
这篇文章主要为大家详细介绍了一个仿邮箱登录提示框js开发案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近在好好的研究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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 深入理解Promise.all

    深入理解Promise.all

    这篇文章主要介绍了深入理解Promise.all,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 浅谈JavaScript之事件绑定

    浅谈JavaScript之事件绑定

    关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果
    2013-07-07
  • js DNA动态序列比对代码

    js DNA动态序列比对代码

    JavaScript动态序列比对代码,随便 写着玩的,在网上见到用VC、VB写的比较多,这个算法以前在高中课本上见到过,我只是用Js写一下试试,或许还不是太准确。
    2010-07-07
  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    很多南方的小伙伴可能没怎么见过或者从来没见过下雪,这篇文章小编给大家带来一个小Demo,模拟了下雪场景。感兴趣的小伙伴快来跟随小编一起学习一下吧
    2021-12-12
  • 15个顶级开源JavaScript框架和库

    15个顶级开源JavaScript框架和库

    今天小编就为大家分享一篇关于15个顶级开源JavaScript框架和库的文章,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • 详解JS ES6变量的解构赋值

    详解JS ES6变量的解构赋值

    这篇文章主要介绍了JS ES6变量的解构赋值,对ES6感兴趣的同学,可以参考下
    2021-05-05
  • js中less常用的方法小结

    js中less常用的方法小结

    下面小编就为大家带来一篇js中less常用的方法小结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 从setTimeout看js函数执行过程

    从setTimeout看js函数执行过程

    这篇文章主要介绍了从setTimeout看js函数执行过程,需要的朋友可以参考下
    2017-12-12
  • JavaScript中调用函数的4种方式代码实例

    JavaScript中调用函数的4种方式代码实例

    这篇文章主要介绍了JavaScript中调用函数的4种方式代码实例,本文分别给出方法调用模式、函数调用模式、构造器调用模式、apply调用模式4种方式的代码实例,需要的朋友可以参考下
    2015-07-07
  • JS实现关键字搜索时的相关下拉字段效果

    JS实现关键字搜索时的相关下拉字段效果

    关键字搜索时有下拉字段,在使用百度时会遇到,本例讲述用js实现类似的效果
    2014-08-08

最新评论