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


Posted in Javascript onJuly 28, 2016

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

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

Javascript 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
JavaScript设计模式初探
Jan 07 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
利用JS实现数字增长
Jul 28 #Javascript
灵活使用数组制作图片切换js实现
Jul 28 #Javascript
AngularJS 中文API参考手册
Jul 28 #Javascript
AngularJS 简单应用实例
Jul 28 #Javascript
AngularJS 路由详解和简单实例
Jul 28 #Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 #Javascript
AngularJS中实现动画效果的方法
Jul 28 #Javascript
You might like
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
Java中final关键字详解
2015/08/10 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
厨师岗位职责
2013/11/12 职场文书
出国考察邀请函
2014/01/21 职场文书
总裁助理岗位职责
2014/02/17 职场文书
房屋转让协议书
2014/04/11 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
检讨书范文
2015/01/27 职场文书
英文版辞职信
2015/02/28 职场文书
停电通知范文
2015/04/16 职场文书
公司搬迁通知
2015/04/20 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书