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

来源：互联网发布：开机自动运行软件编辑：程序博客网时间：2024/05/22 06:19

最近在好好的研究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，哈哈~赞个

1 0