jquery实现自动补全邮箱地址

开始做的邮箱补全代码

  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:"+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:"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#aaa'>请选择邮箱类型</font></div> <div class='newemail' style='width:"+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:"+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:"+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 }
View Code

在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:"+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:"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#aaa'>请选择邮箱类型</font></li> <li class='newemail' style='width:"+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:"+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:"+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 }
View Code

为了防止在点击回车选择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 }
View Code

 

在查阅资料时，发现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

posted on 2013-07-25 18:15  yanmiao  阅读(557)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 yanmiao
Powered by .NET 9.0 on Kubernetes