javascript实例学习之三——类新浪微博的登录框
该登录框和百度的搜索框类似，可以实现如下效果:
1.文字输入时自动弹出提示层
2，提示层根据输入文字进行自动过滤
3，提示层可以使用上下按键进行选择
4,提示层可以点击或者回车来确认输入
微博登录框html代码
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>微博登录框效果</title> <style> *,*:before,*:after{box-sizing:border-box;} div{width:300px;margin:50px auto;position:relative;} div input{width:100%;height:25px;line-height: 25px;margin:5px 0;} ul{width:300px;list-style: none; margin:0; padding: 0;position:absolute; top:40px; left:0; border:1px solid #ccc; background:#fff;display: none;} ul li{width:100%;padding: 3px 5px ;cursor:pointer;} ul li.active{background: rgb(232,244,252);color:rgb(153,153,153);} </style> </head> <body> <div id="login"> <input type="text" placeholder="邮箱/会员账号/手机号" id="username"> <input type="text" placeholder="请输入密码"> <ul id="suggest"> <li class="note">请选择邮箱类型</li> <li email="" class="active"></li> <li email="@sina.com" class="item">@sina.com</li> <li email="@163.com" class="item">@163.com</li> <li email="@qq.com" class="item">@qq.com</li> <li email="@126.com" class="item">@126.com</li> <li email="@vip.sina.com" class="item">@vip.sina.com</li> <li email="@sina.cn" class="item">@sina.cn</li> <li email="@hotmail.com" class="item">@hotmail.com</li> <li email="@gmail.com" class="item">@gmail.com</li> <li email="@sohu.com" class="item">@sohu.com</li> <li email="@yahoo.com" class="item">@yahoo.com</li> <li email="@139.com" class="item">@139.com</li> <li email="@wo.com.cn" class="item">@wo.com.cn</li> <li email="@189.cn" class="item">@189.com</li> </ul> </div> <script src="js/weiboLogin.js"></script> </body> </html>
微博登录框javascript代码
document.addEventListener('DOMContentLoaded', function() { var s1 = new Suggest(); s1.init(); }, false); function Suggest() { //提示框对应的输入框 this.oMenu = document.getElementById('username'); //提示框对应的提示层 this.oContent=document.getElementById(''); this.oUl = document.getElementById('suggest'); this.aLis = this.oUl.getElementsByTagName('li'); } Suggest.prototype = { constructor: Suggest, init: function() { var that = this; var iNow = 1; this.oInput.addEventListener('input', function() { //效果1：文本框输入的时候，提示框显示 that.showUl(); //效果3：提示框自动补充邮箱后缀，并在用户输入@之后，自动进行过滤 that.changeUl(); that.sel(iNow); }, false); //效果2：失去焦点的时候，提示框隐藏 this.oInput.addEventListener('blur', function() { that.hideUl(); }, false); // //效果4，点击对应的提示项，文本框的内容随之改变，同时提示框消失 for (var i = 1; i < this.aLis.length; i++) { this.aLis[i].index = i; this.aLis[i].addEventListener('mouseover', function() { that.sel(this.index); iNow = this.index; }, false); this.aLis[i].addEventListener('mousedown',function(){ that.oInput.value=this.innerHTML; },false); } //效果5：上下键盘可以切换提示选中项 //效果6：当按下回车键时，文本框内容随之改变，同时提示框消失 //焦点在哪个控件上，就给哪个控件添加处理时间 this.oInput.addEventListener('keydown', function(e) { var event = e || window.event; var code = event.charCode || event.keyCode; if (code == 38) { //向上 iNow--; if (iNow == 0) { iNow = that.aLis.length - 1; } } else if (code == 40) { iNow++; if (iNow == that.aLis.length ) { iNow = 1; } } that.sel(iNow); //如果按下的是回车键 if(code==13){ that.oInput.value=that.aLis[iNow].innerHTML; that.oInput.blur(); } }, false); }, showUl: function() { this.oUl.style.display = 'block'; for (var i = 0; i < this.aLis.length; i++) { this.aLis[i].style.display = 'block'; this.aLis[i].className = ''; } }, hideUl: function() { this.oUl.style.display = 'none'; }, changeUl: function() { var value = this.oInput.value; var suffix = value.substring(value.indexOf('@') + 1); var reg = new RegExp('@' + suffix); var match = reg.test(value); for (var i = 1, len = this.aLis.length; i < len; i++) { var emailText = this.aLis[i].getAttribute('email'); //分为两种情况，输入内容包含@，以及输入内容不包含@ if (match) { //说明输入内容包含@ //根据输入的后缀进行过滤，只显示匹配的邮箱 if (reg.test(emailText)) { this.aLis[i].innerHTML = value.substring(0, value.indexOf('@')) + emailText; } else { this.aLis[i].style.display = 'none'; } } else { //说明输入内容不包含@ this.aLis[i].innerHTML = value + emailText; } } }, sel: function(iNow) { for (var i = 1; i < this.aLis.length; i++) { this.aLis[i].className = ''; } if (this.oInput.value) { this.aLis[iNow].className = 'active'; } }, };
