分享一个由原生JS实现的注册或登录时，输入邮箱时下拉提示效果，效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现登录框提示</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.125 Arial, Helvetica, sans-serif;
}
li {
list-style: none;
}
#login {
width: 252px;
height: 385px;
/* 彩色背景图 */
background: url(./images/1.jpg) no-repeat;
margin: 20px auto;
position: relative;
}
.detail {
margin: 0 0 5px 30px;
position: relative;
top: 110px;
}
.detail input {
color: #999999;
border: 1px solid #74C8E5;
border-radius: 3px 3px 3px 3px;
height: 15px;
line-height: 14px;
padding: 8px 5px 7px;
width: 184px;
}
#option {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
left: 30px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 142px;
visibility: visible;
width: 194px;
z-index: 1;
display: none;
}
.note,
.item {
clear: both;
color: #999999;
cursor: pointer;
font-size: 12px;
height: 20px;
line-height: 20px;
list-style: none outside none;
margin: 0 1px;
padding: 0 5px;
white-space: nowrap;
}
.active {
white-space: nowrap;
clear: both;
color: rgb(153, 153, 153);
cursor: pointer;
font-size: 12px;
height: 20px;
line-height: 20px;
list-style: none outside none;
margin: 0pt 1px;
padding: 0pt 5px;
background: none repeat scroll 0% 0% rgb(232, 244, 252);
}
</style>
</head>
<body>
<div id="login">
<div class="detail">
<input
id="input"
type="text"
maxlength="128"
placeholder="邮箱/会员帐号/手机号"
name="username"
autocomplete="off">
</div>
<div class="detail">
<input
type="password"
maxlength="24"
placeholder="请输入密码"
name="password">
</div>
<ul id="option">
<li class="note">请选择邮箱类型</li>
<li email="" class="item"></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.cn" class="item">@yahoo.cn</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.cn</li>
</ul>
</div>
<script>
window.onload = function () {
// 实列化
var option = new Option();
// 初始化
option.init();
};
// 构造函数
function Option() {
// 获取用户输入框
this.input = document.getElementById("input");
// 获取下拉选项框
this.optionBox = document.getElementById("option");
// 获取下拉列表项
this.optionItem = this.optionBox.getElementsByTagName("li");
};
// 为构造函数添加原型方法
Option.prototype = {
// 初始化
init: function () {
// 输入改变时
this.onChange();
// 光标移开时
this.onBlur();
},
// 边续触发改变时
onChange: function () {
// 兼容各浏览器
var ie = !-[1,];
var that = this;
if (ie) {
that.input.onpropertychange = function(){
// 防止在IE下输入值为空的时触发下拉提示框
if (that.input.value == "") {
that.tips();
return;
};
// 显示下拉列表框
that.optionBox.style.display = "block";
// 显示提示
that.tips();
// 输入时的默认选中
that.select(0);
};
} else {
that.input.oninput = function(){
// 显示下拉列表框
that.optionBox.style.display = "block";
// 显示提示
that.tips();
// 输入时的默认选中
that.select(0);
};
}
},
// 光标移开时隐藏下拉提示框
onBlur: function () {
var that = this;
that.input.onblur=function () {
that.optionBox.style.display="none";
};
},
// 输入时提示内空相应改变
tips: function () {
var value = this.input.value;
// 定义邮箱正则
var reg = new RegExp('@' + value.substring(value.indexOf('@') + 1) + '');
// 初始化下拉列表
for (var i = 1; i < this.optionItem.length; i++) {
this.optionItem[i].style.display = "block";
this.optionItem[i].flag = true;
};
if (reg.test(value)) {
// 获取所有下拉选项自定义属性
for (var i = 1; i < this.optionItem.length; i++) {
var email = this.optionItem[i].getAttribute("email");
// 为选中的第一个选项直接赋值
if (i == 1) {
// 将输入值赋给选项
this.optionItem[i].innerHTML = value;
} else {
if (reg.test(email)) {
this.optionItem[i].style.display = "block";
this.optionItem[i].flag = true;
} else {
this.optionItem[i].style.display = "none";
this.optionItem[i].flag = false;
}
}
}
} else {
// 获取所有下拉选项自定义属性
for (var i = 1; i < this.optionItem.length; i++){
var email = this.optionItem[i].getAttribute("email");
// 如果获取的值为空时
if (!email) {
// 将输入值赋给选项
this.optionItem[i].innerHTML = value;
} else {
// 选项的内容为输入值加上其属性值
this.optionItem[i].innerHTML = value + email;
}
}
}
},
// 提示列表项选中方法
select: function (index) {
var that = this;
var array = [];
// 选中一个提示后，重新输入时，将选中项还原为默认样式
for (var i = 1; i < this.optionItem.length; i++) {
this.optionItem[i].className = "item";
if(this.optionItem[i].flag) {
array.push(this.optionItem[i]);
};
};
// 当输入内容为空时
if (this.input.value == "") {
array[index].className = "item";
// 当输入内容不为空时
} else {
array[index].className = "active";
};
// 为所有的下拉提示添加鼠标移入事件
for (var i = 1; i < array.length; i++) {
array[i].index = i;
// 鼠标移入时
array[i].onmouseover = function () {
// 将所有选项的样式还原为默认样式
for (var i = 1; i < that.optionItem.length; i++) {
that.optionItem[i].className = "item";
};
// 为当前选项添加激活样式
this.className = "active";
index = this.index;
};
// 鼠标点击时，将当前的提示选项内容替换为输入值
array.onmousedown = function () {
that.input.value = this.innerHTML;
};
};
// 添加键盘事件
document.onkeydown = function (ev) {
// 事件兼容
var myEvent = ev || window.event;
// 按键向上
if (myEvent.keyCode == 38) {
if (index == 0) {
index = array.length - 1;
} else {
index--;
};
for (var i = 1; i < that.optionItem.length; i++) {
that.optionItem[i].className = "item";
};
array[index].className = "active";
// 按键向下
} else if (myEvent.keyCode == 40){
// 当下标为最后一个还原为第一个
if (index == array.length - 1) {
index = 0;
} else {
index++;
};
// 清空所有下拉选项为默认样式
for (var i = 1; i < that.optionItem.length; i++) {
that.optionItem[i].className = "item";
};
// 为当前选项添加选中样式
array[index].className = "active";
// 按键回车
} else if (myEvent.keyCode == 13) {
// 将当前的提示选项内容替换为输入值
that.input.value = array[index].innerHTML;
// 将光标移开输入框，并关闭下拉列表项
that.input.blur();
};
};
}
};
</script>
</body>
</html>
