一个仿微博登陆邮箱提示框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 在各个浏览器中执行的耐性
Apr 06 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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微信开发之查询微信精选文章
2016/06/23 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
简述Python2与Python3的不同点
2018/01/21 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
年终工作总结范文2014
2014/11/27 职场文书
介绍信如何写
2015/01/31 职场文书
关于倡议书的范文
2015/04/29 职场文书
检讨书范文大全
2015/05/07 职场文书
法律讲堂观后感
2015/06/11 职场文书
城南旧事电影观后感
2015/06/16 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python