在文本框里输入email前缀名后，在下拉列表自动匹配弹出常用的email类型，可根据自己的需求来自定义。
<!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">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>文本框内输入email自动匹配效果_武鸣人</title>
<style type="text/css">
body{margin:0px;padding:20px;}
#myemail,.newemail{cursor:default;}
</style>
<script src="/img/jquery_wuming_ren.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果<br />
Email: <input type="text" id="www_wuming_ren" value="" style="width:150px;height:18px;line-height:18px;border:1px solid #999;">
<script type="text/javascript">
var nowid;
var totalid;
var can1press = false;
$(document).ready(function(){
$("#www_wuming_ren").focus(function(){//文本框获得焦点，插入Email提示层
$(this).after("<div id='myemail' style='width:auto; height:auto; background:#FFF; color:#000; position:absolute; left:"+$(this).get(0).offsetLeft+"px; top:"+($(this).get(0).offsetTop+$(this).height()+2)+"px; border:1px solid #999;'></div>");
if($("#myemail").html()){
$("#myemail").css("display","block");
$(".newemail").css("width",$("#myemail").width());
can1press = true;
} else {
$("#myemail").css("display","none");
can1press = false;
}
}).keyup(function(){//文本框输入文字时，显示Email提示层和常用Email
var press = $(this).val();
if (press){
var emailtxt = "";
var emailvar = new Array("@qq.com","@gmail.com","@126.com","@163.com","@sohu.com","@sina.com","@yahoo.com","@foxmail.com","@wuming.ren");
totalid = emailvar.length - 1;
for(var i=0; i<emailvar.length; i++) {
emailtxt = emailtxt + "<div class='newemail' style='width:100%;'><font color='red'>" + press + "</font>" + emailvar[i] + "</div>"
}
$("#myemail").html(emailtxt);
if($("#myemail").html()){
$("#myemail").css("display","block");
$(".newemail").css("width",$("#myemail").width());
can1press = true;
} else {
$("#myemail").css("display","none");
can1press = false;
}
}
})
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$(document).click(function(){//文本框失去焦点时，删除提示层
if(can1press){
$("#myemail").remove();
can1press = false;
}
})
$(".newemail").live("mouseover",function(){//鼠标经过提示Email时，高亮该条Email
$(".newemail").css("background","#FFF");
$(this).css("background","#99CCFF");
$(this).focus();
nowid = $(this).index();
}).live("click",function(){//鼠标点击Email时，文本框内容替换成该条Email，并删除提示层
var newhtml = $(this).html();
newhtml = newhtml.replace(/<.*?>/g,"");
$("#www_wuming_ren").val(newhtml);
$("#myemail").remove();
})
$(document).bind("keydown",function(e)
{
if(can1press){
switch(e.which)
{
case 38:
if (nowid > 0){
$(".newemail").css("background","#FFF");
$(".newemail").eq(nowid).prev().css("background","#99CCFF").focus();
nowid = nowid-1;
}
if(!nowid){
nowid = 0;
$(".newemail").css("background","#FFF");
$(".newemail").eq(nowid).css("background","#99CCFF");
$(".newemail").eq(nowid).focus();
}
break;
case 40:
if (nowid < totalid){
$(".newemail").css("background","#FFF");
$(".newemail").eq(nowid).next().css("background","#99CCFF").focus();
nowid = nowid+1;
}
if(!nowid){
nowid = 0;
$(".newemail").css("background","#FFF");
$(".newemail").eq(nowid).css("background","#99CCFF");
$(".newemail").eq(nowid).focus();
}
break;
case 13:
var newhtml = $(".newemail").eq(nowid).html();
newhtml = newhtml.replace(/<.*?>/g,"");
$("#www_wuming_ren").val(newhtml);
$("#myemail").remove();
}
}
})
})//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处