开始做的邮箱补全代码
1 //检查email邮箱 2 3 function isEmail(str) { 4 if (str.indexOf("@") > 0) { 5 return true; 6 } else { 7 return false; 8 } 9 } 10 //绑定自动补全事件 11 12 function autoCompleBind() { 13 var nowid; //当前索引 14 var totalid; //邮箱总数 15 var can1press = false; // 16 var emailafter; 17 var emailbefor; 18 var width; 19 $("#account_login").focus(function() { //文本框获得焦点，插入Email提示层 20 $("#email_list").remove(); 21 width = $(this).width(); 22 $(this).after("<div id='email_list' style='"+width+"px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:" + $(this).get(0).offsetLeft + "px; top:" + ($(this).get(0).offsetTop + $(this).height() + 2) + "px; border:1px solid #ccc;z-index:5px; '></div>"); 23 if ($("#email_list").html()) { 24 $("#email_list").css("display", "block"); 25 $(".newemail").css("width", $("#email_list").width()); 26 can1press = true; 27 } else { 28 $("#email_list").css("display", "none"); 29 can1press = false; 30 } 31 }).keyup(function() { //文本框输入文字时，显示Email提示层和常用Email 32 var press = $("#account_login").val(); 33 if (press != "" || press != null) { 34 var emailtxt = ""; 35 var emailvar = new Array("@163.com", "@126.com", "@yahoo.com", "@qq.com", "@sina.com", "@sina.cn", "@sohu.com", "@gmail.com", "@hotmail.com", "@foxmail.com"); 36 totalid = emailvar.length; 37 var emailmy = "<div style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#aaa'>请选择邮箱类型</font></div> <div class='newemail' style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + press + "</font></div>"; 38 if (!(isEmail(press))) { 39 for (var i = 0; i < emailvar.length; i++) { 40 emailtxt = emailtxt + "<div class='newemail' style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + press + "</font>" + emailvar[i] + "</div>" 41 } 42 } else { 43 emailbefor = press.split("@")[0]; 44 emailafter = "@" + press.split("@")[1]; 45 for (var i = 0; i < emailvar.length; i++) { 46 var theemail = emailvar[i]; 47 if (theemail.indexOf(emailafter) == 0) { 48 emailtxt = emailtxt + "<div class='newemail' style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + emailbefor + "</font>" + emailvar[i] + "</div>" 49 } 50 } 51 } 52 $("#email_list").html(emailmy + emailtxt); 53 if ($("#email_list").html()) { 54 $("#email_list").css("display", "block"); 55 $(".newemail").css("width", $("#email_list").width()); 56 can1press = true; 57 } else { 58 $("#email_list").css("display", "none"); 59 can1press = false; 60 } 61 beforepress = press; 62 $(".newemail").eq(nowid).css("background", "#CACACA").focus(); 63 64 } 65 if (press == "" || press == null) { 66 $("#email_list").html(""); 67 $("#email_list").css("display", "none"); 68 } 69 }) 70 $(document).click(function() { //文本框失焦时删除层 71 if (can1press) { 72 $("#email_list").remove(); 73 can1press = false; 74 if ($("#account_login").focus()) { 75 can1press = false; 76 } 77 } 78 }) 79 $(".newemail").live("mouseover", function() { //鼠标经过提示Email时，高亮该条Email 80 $(".newemail").css("background", "#FFF"); 81 $(this).css("background", "#CACACA"); 82 $(this).focus(); 83 nowid = $(this).index(); 84 }).live("click", function() { //鼠标点击Email时，文本框内容替换成该条Email，并删除提示层 85 var newhtml = $(this).html(); 86 newhtml = newhtml.replace(/<.*?>/g, ""); 87 $("#account_login").val(newhtml); 88 $("#email_list").remove(); 89 }) 90 $(document).bind("keydown", function(e) { 91 if (can1press) { 92 switch (e.which) { 93 case 38: //向上按钮 94 if (nowid > 0) { 95 nowid = nowid - 1; 96 $(".newemail").css("background", "#FFF"); 97 $(".newemail").eq(nowid).css("background", "#CACACA").focus(); 98 } 99 if (!nowid) { 100 nowid = 0; 101 $(".newemail").css("background", "#FFF"); 102 $(".newemail").eq(nowid).css("background", "#CACACA"); 103 $(".newemail").eq(nowid).focus(); 104 } 105 break; 106 107 case 40: //向下按钮 108 if (nowid < totalid) { 109 $(".newemail").css("background", "#FFF"); 110 $(".newemail").eq(nowid).next().css("background", "#CACACA").focus(); 111 nowid = nowid + 1; 112 } 113 if (!nowid) { 114 nowid = 0; 115 $(".newemail").css("background", "#FFF"); 116 $(".newemail").eq(nowid).css("background", "#CACACA"); 117 $(".newemail").eq(nowid).focus(); 118 } 119 break; 120 121 case 13: 122 var newhtml = $(".newemail").eq(nowid).html(); 123 newhtml = newhtml.replace(/<.*?>/g, ""); 124 $("#account_login").val(newhtml); 125 $("#email_list").remove(); 126 alert(13); 127 } 128 } 129 }) 130 }
在firefox/chrome/IE6+ 都正常，唯独IE6上定位失效。经过调试，发现IE6下获取的offsetLeft与其他浏览器下不一致，在FF中obj.offsetLeft是当前对象的position:relative的父级元素的偏移,
可是在IE中,obj.offsetLeft是相对于其父级元素的定位。
后来想用jquery获取绝对位置解决此问题，可是又会出现当调整浏览器窗口大小的时候发生位移的情况。于是决定采用相对位移，用jquery获取与父级的相对位移，然后定义父级元素的“position:relative;”属性，使子元素相对该父级元素定位。整理后代码如下：
1 //检查email邮箱 2 3 function isEmail(str) { 4 if (str.indexOf("@") > 0) { 5 return true; 6 } else { 7 return false; 8 } 9 } 10 //绑定自动补全事件 11 12 function autoCompleBind() { 13 var nowid; //当前索引 14 var totalid; //邮箱总数 15 var can1press = false; // 16 var emailafter; 17 var emailbefor; 18 var width; 19 $("#account_login").focus(function() { //文本框获得焦点，插入Email提示层 20 $("#email_list").remove(); 21 width = $(this).width(); 22 $(this).after("<ul id='email_list' style='"+width+"px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:" + $(this).position().left + "px; top:" + ($(this).position().top + $(this).height() + 2) + "px; border:1px solid #ccc;z-index:5px; '></li>"); 23 if ($("#email_list").html()) { 24 $("#email_list").css("display", "block"); 25 $(".newemail").css("width", $("#email_list").width()); 26 can1press = true; 27 } else { 28 $("#email_list").css("display", "none"); 29 can1press = false; 30 } 31 }) 32 .keyup(function() { //文本框输入文字时，显示Email提示层和常用Email 33 var press = $("#account_login").val(); 34 if (press != "" || press != null) { 35 var emailtxt = ""; 36 var emailvar = new Array("@163.com", "@126.com", "@yahoo.com", "@qq.com", "@sina.com", "@sina.cn", "@sohu.com", "@gmail.com", "@hotmail.com", "@foxmail.com"); 37 totalid = emailvar.length; 38 var emailmy = "<li style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#aaa'>请选择邮箱类型</font></li> <li class='newemail' style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + press + "</font></li>"; 39 if (!(isEmail(press))) { 40 for (var i = 0; i < emailvar.length; i++) { 41 emailtxt = emailtxt + "<li class='newemail' style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + press + "</font>" + emailvar[i] + "</li>" 42 } 43 } else { 44 emailbefor = press.split("@")[0]; 45 emailafter = "@" + press.split("@")[1]; 46 for (var i = 0; i < emailvar.length; i++) { 47 var theemail = emailvar[i]; 48 if (theemail.indexOf(emailafter) == 0) { 49 emailtxt = emailtxt + "<li class='newemail' style='"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + emailbefor + "</font>" + emailvar[i] + "</li>" 50 } 51 } 52 } 53 $("#email_list").html(emailmy + emailtxt); 54 if ($("#email_list").html()) { 55 $("#email_list").css("display", "block"); 56 $(".newemail").css("width", $("#email_list").width()); 57 can1press = true; 58 } else { 59 $("#email_list").css("display", "none"); 60 can1press = false; 61 } 62 beforepress = press; 63 $(".newemail").eq(nowid).css("background", "#CACACA").focus(); 64 65 } 66 if (press == "" || press == null) { 67 $("#email_list").html(""); 68 $("#email_list").css("display", "none"); 69 } 70 }) 71 //焦点移出删除层 72 .blur(function(){ 73 $("#email_list").remove(); 74 can1press = false; 75 }) 76 77 $(".newemail").live("mouseover", function() { //鼠标经过提示Email时，高亮该条Email 78 $(".newemail").css("background", "#FFF"); 79 $(this).css("background", "#CACACA"); 80 $(this).focus(); 81 nowid = $(this).index(); 82 }).live("click", function() { //鼠标点击Email时，文本框内容替换成该条Email，并删除提示层 83 var newhtml = $(this).html(); 84 newhtml = newhtml.replace(/<.*?>/g, ""); 85 $("#account_login").val(newhtml); 86 $("#email_list").remove(); 87 }) 88 $("form #login_field").bind("keydown", function(e) { 89 if (can1press) { 90 switch (e.which) { 91 case 38: //向上按钮 92 if (nowid > 0) { 93 nowid = nowid - 1; 94 $(".newemail").css("background", "#FFF"); 95 $(".newemail").eq(nowid).css("background", "#CACACA").focus(); 96 } 97 if (!nowid) { 98 nowid = 0; 99 $(".newemail").css("background", "#FFF"); 100 $(".newemail").eq(nowid).css("background", "#CACACA"); 101 $(".newemail").eq(nowid).focus(); 102 } 103 break; 104 105 case 40: //向下按钮 106 if (nowid < totalid) { 107 $(".newemail").css("background", "#FFF"); 108 $(".newemail").eq(nowid).next().css("background", "#CACACA").focus(); 109 nowid = nowid + 1; 110 } 111 if (!nowid) { 112 nowid = 0; 113 $(".newemail").css("background", "#FFF"); 114 $(".newemail").eq(nowid).css("background", "#CACACA"); 115 $(".newemail").eq(nowid).focus(); 116 } 117 break; 118 119 case 13: 120 var newhtml = $(".newemail").eq(nowid).html(); 121 newhtml = newhtml.replace(/<.*?>/g, ""); 122 $("#account_login").val(newhtml); 123 $("#email_list").remove(); 124 } 125 } 126 }) 127 }
为了防止在点击回车选择email选项的时候 直接提交表单，故对回车事件做了处理。当当前input元素不是submmit时，索引到下一个input元素，如果是 则直接提交表单。
1 //绑定回车事件，防止点击回车直接提交form 2 function autoEnterDown(){ 3 $("form input").keypress(function (e) { 4 var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; 5 var length = this.form.elements.length; 6 if (keyCode == 13){ 7 if (this == this.form.elements[length-2]){ 8 return true; 9 }else{ 10 var i; 11 for (i = 0; i < length; i++) 12 if (this == this.form.elements[i]) 13 break; 14 i = (i + 1) % length; 15 this.form.elements[i].focus(); 16 return false; 17 } 18 } 19 else 20 return true; 21 }); 22 }
在查阅资料时，发现JS中的的offsetLeft与jquery的offset().left 是不同的。在JS中，offsetLeft表示与父标签的左边距的距离；而在JQUERY中，offset().top表示与距窗口最左侧的距离，相当于将JS中此标签所有的父结点、父父结点……的offsetLeft相加起来的值；
用JS代码表示JQUERY的offset().left为：
1 function getClientLeftTop(el){ 2 var temp=el; 3 var left = temp.offsetLeft, top = temp.offsetTop; 4 while(temp=temp.offsetParent) 5 { 6 left+=temp.offsetLeft; 7 top +=temp.offsetTop; 8 } //得到DIV窗口的绝对距离； 9 var a={ 10 left:left, 11 top:top 12 } 13 return a; 14 }
上述代码中，返回的两个值a.left相当于jquery的offset().left 而a.top相当于jquery的offset().top