js、jquery实现输入邮箱名自动显示邮箱地址后缀下拉菜单

这里给出一个简单的小实例,没设计太多逻辑,只不过用了几个事件而已,更加完善的东西可以自行修改斟酌:[html]
<!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=gb2312" />
<title>无标题文档</title>
<style>
body{font-size:12px;}
body,ul,li,form,p,input{padding:0;margin:0;}
li,ul{list-style-type:none;}
li{line-height:20px;}
li:hover{background:#F1F3FE;}
form div{line-height:30px;}
.loginform{width:345px;margin-left:20px;}
.inputbg{line-height:22px;border:1px solid #dcdcdc;height:22px;width:200px;}
.loginform label{width:140px;display:block;float:left;}
.clear{clear:both;height:0;overflow:hidden;}
.inputposition{position:relative;}
.emaillist{position:absolute;width:200px;left:140px;border:1px solid #dcdcdc;background:#fff;display:none;}
.emaillist p{background:#EEEEEE;line-height:20px;}
</style>
</head>

<body>

<form class="loginform">
<div class="inputposition"><label>Email Address:</label><input type="text" id="email" value="" class="inputbg"/>
<ul class="emaillist">
</ul>
</div>
<div class="clear"></div>
<div><label>password:</label><input type="text" class="inputbg"/></div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<!–<script type="text/javascript" src="jquery.js"></script>–>
<script type="text/javascript">
$(function(){
var mailList = new Array(‘@163.com’,’@126.com’,’@hotmail.com’);
$("#email").bind("keyup",function(){
if($(this).val() == ”){
$(".emaillist").hide();
return false;
}

$(‘.emaillist’).empty();
for(var i = 0;i<mailList.length;i++){
var emailText = $(this).val();
$(‘.emaillist’).append(‘<li class=addr>’+emailText+mailList[i]+'</li>’);
}
$(‘.addr’).bind(‘click’,function(){
console.info($(this).html());
$(‘#email’).val($(this).html());
$(".emaillist").hide();
});
$(‘.emaillist’).show();
})
})
</script>
</body>
</html>[/html]

Avatar photo

About Blackford

这是个最好的时代,这是个最坏的时代,这是个充满希望的春天,这是个令人绝望的冬天,我们前面什么都有,我们前面什么都没有。梦想,让我们一次次的走远,又一次次的回头,一个关于人生的梦想还在不断奔跑,带着喜悦和疼痛,不过一切才刚刚开始,并且直到今天也远远没有结束
This entry was posted in 前端设计 and tagged , , , , . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注