该登录框和百度的搜索框类似，可以实现如下效果:
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:%;height:25px;line-height: 25px;margin:5px ;}
ul{width:300px;list-style: none; margin:; padding: ;position:absolute; top:40px; left:; border:1px solid #ccc; background:#fff;display: none;}
ul li{width:%;padding: 3px 5px ;cursor:pointer;}
ul li.active{background: rgb(,,);color:rgb(,,);}
</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">@.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@.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">@.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@.com</li>
</ul>
</div>
<script src="js/weiboLogin.js"></script>
</body>
</html>
微博登录框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 = ;
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 = ; 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 == ) { //向上
iNow--;
if (iNow == ) {
iNow = that.aLis.length - ;
}
} else if (code == ) {
iNow++;
if (iNow == that.aLis.length ) {
iNow = ;
}
}
that.sel(iNow);
//如果按下的是回车键
if(code==){
that.oInput.value=that.aLis[iNow].innerHTML;
that.oInput.blur();
}
}, false);
},
showUl: function() {
this.oUl.style.display = 'block';
for (var i = ; 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('@') + );
var reg = new RegExp('@' + suffix);
var match = reg.test(value);
for (var i = , 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(, value.indexOf('@')) + emailText;
} else {
this.aLis[i].style.display = 'none';
}
} else {
//说明输入内容不包含@
this.aLis[i].innerHTML = value + emailText;
}
}
},
sel: function(iNow) {
for (var i = ; i < this.aLis.length; i++) {
this.aLis[i].className = '';
}
if (this.oInput.value) {
this.aLis[iNow].className = 'active';
}
},
};微博登录框javascript代码