jQuery实现Email邮箱地址自动补全功能代码
2015-11-03 10:48
1126 查看
本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码。分享给大家供大家参考,具体如下:
jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入“qq”、“Sina”、“163”等等可以看到效果;鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层.
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-email-auto-comp-codes/
具体代码如下:
<!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> <title>输入Email相关字符自动提示Email地址</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <style type="text/css"> body { margin:0px; padding:0px; font-family:Arial; font-size:12px; padding:10px; } #myemail, .newemail, .newemailtitle{ cursor:default; line-height:18px; } </style> </head> <body> Email <input id="me" type="text" value="" style="width:150px; height:18px; line-height:18px; border:1px solid #999;"> <script type="text/javascript"> var nowid; var totalid; var can1press = false; var emailafter; var emailbefor; $(document).ready(function(){ $("#me").focus(function(){ //文本框获得焦点,插入Email提示层 $("#myemail").remove(); $(this).after("<div id='myemail' style='width:170px; 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>"); 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 = $("#me").val(); if (press!="" || press!=null){ var emailtxt = ""; var emailvar = new Array("@163.com","@126.com","@yahoo.com","@qq.com","@sina.com","@gmail.com","@hotmail.com","@foxmail.com"); totalid = emailvar.length; var emailmy = "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font></div>"; if(!(isEmail(press))){ for(var i=0; i<emailvar.length; i++) { emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font>" + emailvar[i] + "</div>" } } else { emailbefor = press.split("@")[0]; emailafter = "@" + press.split("@")[1]; for(var i=0; i<emailvar.length; i++) { var theemail = emailvar[i]; if(theemail.indexOf(emailafter) == 0) { emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + emailbefor + "</font>" + emailvar[i] + "</div>" } } } $("#myemail").html(emailmy+emailtxt); if($("#myemail").html()){ $("#myemail").css("display","block"); $(".newemail").css("width",$("#myemail").width()); can1press = true; } else { $("#myemail").css("display","none"); can1press = false; } beforepress = press; } if (press=="" || press==null){ $("#myemail").html(""); $("#myemail").css("display","none"); } }) $(document).click(function(){ //文本框失焦时删除层 if(can1press){ $("#myemail").remove(); can1press = false; if($("#me").focus()){ can1press = false; } } }) $(".newemail").live("mouseover",function(){ //鼠标经过提示Email时,高亮该条Email $(".newemail").css("background","#FFF"); $(this).css("background","#CACACA"); $(this).focus(); nowid = $(this).index(); }).live("click",function(){ //鼠标点击Email时,文本框内容替换成该条Email,并删除提示层 var newhtml = $(this).html(); newhtml = newhtml.replace(/<.*?>/g,""); $("#me").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","#CACACA").focus(); nowid = nowid-1; } if(!nowid){ nowid = 0; $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).css("background","#CACACA"); $(".newemail").eq(nowid).focus(); } break; case 40: if (nowid < totalid){ $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).next().css("background","#CACACA").focus(); nowid = nowid+1; } if(!nowid){ nowid = 0; $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).css("background","#CACACA"); $(".newemail").eq(nowid).focus(); } break; case 13: var newhtml = $(".newemail").eq(nowid).html(); newhtml = newhtml.replace(/<.*?>/g,""); $("#me").val(newhtml); $("#myemail").remove(); } } }) }) //检查email邮箱 function isEmail(str){ if(str.indexOf("@") > 0) { return true; } else { return false; } } </script> 在输入框中输入“qq”、“Sina”、“163”等等可以看到效果 </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- ElectronMail:ProtonMail 和 Tutanota 的桌面客户端
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法