一个仿微博登陆邮箱提示框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 相关文章推荐
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
利用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操作Memcache实例介绍
2013/06/14 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
php实用代码片段整理
2016/11/12 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
python循环监控远程端口的方法
2015/03/14 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python字典简介以及用法详解
2016/11/15 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
关于责任的演讲稿
2014/05/20 职场文书
辞职信怎么写
2015/02/27 职场文书
党纪处分决定书
2015/06/24 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android