高学平的网络日志

  • 编程语言
    • PHP服务器脚本
    • Java编程语言
    • Python程序设计
  • 移动开发
    • Android开发
    • IOS开发
  • 架构运维
  • 数据库技术
  • 前端设计
  • 胡言乱语
  • AI
  • 关于我

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

  • Blackford
  • 2013-01-17
  • 0

这里给出一个简单的小实例,没设计太多逻辑,只不过用了几个事件而已,更加完善的东西可以自行修改斟酌:[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]

© 2023 高学平的网络日志
Theme by Wing
  • {{ item.name }}
  • {{ item.name }}