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，哈哈~赞个

JS面向对象（仿邮箱登录提示框）相关推荐

【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
android自定义吐司通知,IOS 仿Android吐司提示框的实例(分享)
直接上代码 #import @interface ShowToastView : UIView +(void)showToastView:(UIView *)uiview WithMessage:(N ...
html选择文件夹插件,js/jq仿window文件夹框选操作插件
0.先给大家看看效果: 1.创建一个index.html文件 Title ul{list-style: none} li{width:200px;margin:10px;float:left;heig ...
JS实现跟随鼠标的提示框
跟随鼠标的提示框鼠标移入到某个关键词就会出现提示框并且在关键词范围内跟随鼠标的移动是怎么实现的呢? 下面来看代码简单的html和css <body><a href="# ...
JS的三种消息提示框alert confirm prompt
首先来看看alert的效果: 代码为: $(function(){$("#quit").click(quit); })function quit(){alert("消息提 ...
wpf实现仿qq消息提示框
1.实现步骤 1.1 另起一个窗口作为消息提示的窗口,在主窗体中调用,先处理一下消息框的展示问题, AllowsTransparency="True" WindowStyle=& ...
原生js、css分别实现提示框渐渐消失的效果
效果展示: 方法一:(js) 思路:通过js修改dom的visibility.opacity的属性来实现效果. <div id="remind">{{ changeSt ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
js 自定义类Android吐司提示框
(function(){ var mouseX = 0; var mouseY = 0; //定义一个全局toaslist用来存在新建的吐司 var toastLsit ...

JS面向对象（仿邮箱登录提示框）

JS面向对象（仿邮箱登录提示框）相关推荐

最新文章

热门文章