用jquery仿sohu登录——邮箱文本框输入提示
最近在弄一个网站，会员注册、登录时均需要邮箱，为是用户录入，仿sohu登录，用jquery做了一个邮箱输入智能提示，不足之处，请大家指正，不要只扔板砖啊...呵...
目前ie,firefox测试没有问题。估计其他几个常用浏览器也没有问题了。 昨天还有bug，现在已经改过了，欢迎大家提建议啊...
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=gbk" /><title>邮箱输入框提示列表效果</title><style type="text/css"><!--body{background:#fff}.email_div_menu {position: relative;/* relative absolute fixed*/left:0;top:0;width:202px;border:1px solid #ccc;height:auto;background: #FFF;margin-top:-3px;font-size:14px;z-index:0;overflow:hidden;display:none;}.email_div_menu ul{margin:0;padding:0;width:202px;list-style:none;position: relative;z-index:3;background-color: #FFFFFF;}.email_div_menu ul li{display:block;width:202px;height:25px;line-height:25px;text-indent:15px; border-bottom:1px solid #ccc;color:#666;}.email_div{width:200px;height:25px;position:absolute;z-index:4;}.email_div input{width:200px;}.email_div div{position:relative;top:0;left:0;margin-bottom:5px}.menu_ul_li_current{background:#6699FF;font-size:16px;font-amily: "宋体";font-weight: bold;}.menu_ul_li_list{}.cl {clear:both;position:absolute;top:100px;z-index:-5;}.inputtwo {width:200px;height:20px;}--></style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){$("#email").inputSelect();});$.fn.inputSelect=function(){ this.focus(function(){$(".email_div_menu").show();$(this).keyup();});this.blur(function(){$(".email_div_menu").hide();});this.keyup(function(event){var tv = $(this).val();var tv0 = "";var tv1 = "";if(tv.indexOf("@") > -1){tv0 = $.trim(tv);tv0 = tv0.substring(tv0.indexOf("@"));tv1 = $.trim(tv).substring(0,$.trim(tv).indexOf("@"));}//alert($(this).val());$(".email_div ul li").each(function(i){tl = $.trim($(this).html());tl = tl.substring(tl.indexOf("@"));$(this).removeClass("menu_ul_li_list");if(tv.indexOf("@") < 0){$(this).html(tv + tl);$(this).addClass("menu_ul_li_list");}else{$(this).html(tv1 + tl);if(tl.indexOf(tv0) == -1){$(this).removeClass("menu_ul_li_current");$(this).hide();}else{$(this).show();$(this).addClass("menu_ul_li_list");}}});if(event.keyCode == 13){var o = $(".email_div_menu").find(".menu_ul_li_current");if(o.size() > 0){$(this).val($.trim(o.html()));$(".email_div_menu").hide();}}}); this.keydown(function(event) {//alert(event.keyCode);var o = $(".email_div_menu").find(".menu_ul_li_current");var olist = $(".email_div_menu").find(".menu_ul_li_list");//alert("o:" + o.size()+ "-------olist:" +olist.size()); switch (event.keyCode){ case 46: case 8: // back $(this).focus(); break; case 38: // up //alert("o:" + o.size()+ "-------olist:" +olist.size());if(o.size() > 0){o.removeClass("menu_ul_li_current");o.prev().addClass("menu_ul_li_current");}else if(olist.size() > 0){$(".menu_ul_li_list").eq($(".menu_ul_li_list").size() - 1).addClass("menu_ul_li_current");}else{$(".email_div ul li").eq($(".email_div ul li").size() - 1).addClass("menu_ul_li_current");} break; case 40: // down ///alert("o:" + o.size()+ "-------olist:" +olist.size()); if(o.size() > 0){o.removeClass("menu_ul_li_current");o.next().addClass("menu_ul_li_current");}else if(olist.size() > 0){$(".menu_ul_li_list").eq(0).addClass("menu_ul_li_current");}else{$(".email_div ul li").eq(0).addClass("menu_ul_li_current");} break; } });$(".email_div ul li").mousedown(function(){$("#email").val($.trim($(this).html()));$(".email_div_menu").hide();});$(".email_div ul li").mouseover(function(){$(".email_div ul li").removeClass("menu_ul_li_current");$(this).addClass("menu_ul_li_current");});$(".email_div ul li").mouseout(function(){$(this).removeClass("menu_ul_li_current");}); };</script> </head> <body><div style="width:300px; height:100%; background-color:#FFFFCC; padding:10px; border:4px solid #6699FF;"><div>昵称: <input name="password" type="text" id="passwrod" align="left">邮箱:</td> <td width="10" valign="top"> <div id="email" name="email" class="inputtwo"> <div class="email_div_menu"><ul> <li>@163.com</li> <li>@126.com</li> <li>@yaho.com</li> <li>@qq.com</li> <li>@693333.com</li> <li>@69333.com</li> <li>@693.com</li> <li>@69.com</li> <li>@6.com</li></ul> </div></div> </td> </tr></table></div></div><div class="cl"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></body> </html> 1 楼 lcllcl987 2010-01-11 正要搞IntelliSense，呵呵。不错