<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>邮箱自动加上@后面内容</title>
<script id="jqbb" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body { background-color: #fff }
#maillist,#register .toemail iframe {
-moz-border-colors:none;
background:none repeat scroll 0 0 #fff;
border-color:-moz-use-text-color #ccc #ccc;
border-right:1px solid #ccc;
border-style:none solid solid;
border-width:0 1px 1px;
display:none;
left:0;
position:absolute;
top:31px;
width:12.5%;
z-index:999;
left:141px;
font-size:12px;
overflow-x:hidden;
}
#maillist ul {
margin-top:5px;
margin-left:-35px;
}
#maillist ul li {
color:#666;
cursor:pointer;
list-style:none;
}
#maillist ul li:hover {
color:#999;
}
input {
width:12.5%;
}
</style>
</head>
<body>
<label>请输入邮箱地址：</label>
<input id="regemail" class="int-type w-thir" type="text" autocomplete="off" tips="邮箱地址" name="email" rule="" style="ime-mode: disabled;"><div id="maillist" style="display: none;">
<ul>
<li>
<li>@qq.com</li>
<li>@163.com</li>
</ul>
</div>
<script>
function $(id) {
return document.getElementById(id);
}
var lists;
var len;
window.onload = function() {
var objtxt = $("regemail");
var objlist = $("maillist");
lists = document.getElementsByTagName("li");
len = lists.length;
//给每一个li绑定一个鼠标点击事件
for (var i = 1; i < len; i++) {
lists[i].onmousedown = function() {
objtxt.value = this.textContent;
objlist.style.display = "none";
}
}
//计算这个下拉框的显示位置
//焦点选中时
objtxt.onfocus = function() {
objlist.style.display = "block";
}
//焦点移开时
objtxt.onblur = function() {
// objlist.style.display="none";
}
//输入过程中时
objtxt.onkeyup = function() {
//获取文本中的值
var txt = this.value;
var flag = "";
if (txt.indexOf("@") > 0) {
flag = txt.substring(txt.indexOf("@") - 1); //获取输入的@开始的内容
txt = txt.substring(0, txt.indexOf("@"));
} else {
flag = "";
}
var val = "";
//将这个值放到所有的li前面
for (var i = 1; i < len; i++) {
val = lists[i].textContent;
val = val.substring(val.indexOf("@"));
lists[i].textContent = txt + val;
}
//如果用户输入了@，则检查哪些是否满足条件的
if (flag != "") {
var reg = new RegExp(flag, "i");
for (var i = 1; i < len; i++) {
if (reg.test(lists[i].textContent)) {
lists[i].style.display = "block";
} else {
lists[i].style.display = "none";
}
}
}
}
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
