jquery實現自動補全郵箱地址

時間  2019-11-12
標籤 jquery 實現 自動 補全 郵箱 地址 欄目 JQuery 简体版
原文   原文鏈接

開始作的郵箱補全代碼css

  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是相對於其父級元素的定位。
html

後來想用jquery獲取絕對位置解決此問題，但是又會出現當調整瀏覽器窗口大小的時候發生位移的狀況。因而決定採用相對位移，用jquery獲取與父級的相對位移，而後定義父級元素的「position:relative;」屬性，使子元素相對該父級元素定位。整理後代碼以下：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("<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元素，若是是 則直接提交表單。chrome

 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爲：ide

 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().topthis

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程