一个仿微博登陆邮箱提示框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 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
js倒计时显示实例
Dec 11 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
小程序实现可拖动的悬浮按钮
Sep 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
python创建临时文件夹的方法
2015/07/06 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
详解Python绘图Turtle库
2019/10/12 Python
Python中的With语句的使用及原理
2020/07/29 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
超越自我演讲稿
2014/05/21 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
员工工作表扬信
2015/05/05 职场文书
高考升学宴主持词
2019/06/21 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
python语言中pandas字符串分割str.split()函数
2022/08/05 Python