仿新浪微博登录的邮箱地址自动补全功能-阿里云开发者社区

开发者社区> nicenelly> 正文

仿新浪微博登录的邮箱地址自动补全功能

简介:
+关注继续查看

首先,来看一下登录新浪微博的效果图:

当你开始输入你的电子邮箱前的帐号时,就会出现常用邮箱的列表,并自动补齐。

实现的时候,首先在页面上放一个输入文本框和一个div。将div隐藏:

电子邮件:<input id="email" name="email" type="text" autocomplete="off" /> <div id="auto-show"> </div>

样式定义如下:

<mce:style type="text/css"><!-- #email { width: 150px; } .autoDiv { visibility: hidden; position: absolute; width: 150px; height: 150px; border: 1px solid #00f; background-color: White; } --></mce:style><style type="text/css" mce_bogus="1"> #email { width: 150px; } .autoDiv { visibility: hidden; position: absolute; width: 150px; height: 150px; border: 1px solid #00f; background-color: White; } </style>

先预览一下,主要的几个js函数:

详细代码:

//自动显示 function autoShow() { var obj = document.getElementById("email"); var mailAddressList = document.getElementById("auto-show"); var x = 0, y = 0, o = obj; h = obj.offsetHeight; while (o != null) { x += o.offsetLeft; y += o.offsetTop; o = o.offsetParent; } mailAddressList.style.left = x + 'px'; mailAddressList.style.top = y + h + 'px'; mailAddressList.style.visibility = "visible"; } //自动隐藏 function autoHide() { var mailAddressList = document.getElementById("auto-show"); mailAddressList.style.visibility = "hidden"; } //给文本框设置值 function setValue(newIndex, emailInput) { var addr = $("div #" + newIndex).text().replace(/^/s/s*/, '').replace(//s/s*$/, ''); emailInput.val(""); emailInput.val(addr); } //鼠标移入设置样式 function setStyle(obj) { oldIndex = newIndex; newIndex = $(obj).attr("id"); $(obj).css("background-color", "red"); $("div #" + oldIndex).css("background-color", "white"); setValue(newIndex, $("#email")); } //鼠标移出取消样式 function cancelStyle(obj) { $(obj).css("background-color", "white"); } //按上下键设置样式 function setStyleForChange() { //handle newIndex newIndex = newIndex > counts ? 1 : newIndex; newIndex = newIndex < 1 ? counts : newIndex; $("div #" + newIndex).css("background-color", "red"); $("div #" + oldIndex).css("background-color", "white"); }

定义变量:

//define args //常用邮件列表数组 var emailList = ["@163.com", "@126.com", "@gmail.com", "@yahoo.com", "@yahoo.com.cn", "@sina.cn", "@qq.com", "@hotmail.com","@sohu.com","@189.cn"]; //新项的索引(用于设置高亮显示的样式) var newIndex = 0; //旧项的索引(用于取消原有高亮显示的样式) var oldIndex = 0; //邮件列表个数 var counts = emailList.length;

下面,主要代码概况:

代码:

$(document).ready(function () { var emailInput = $("#email"); var emailListDiv = $("#auto-show"); //bind focus event(获得焦点) emailInput.focus(autoShow); //bind blur event(失去焦点) emailInput.blur(autoHide); emailListDiv.addClass("autoDiv"); //bind the events:mouseover、mouseout for the div for (var i = 0; i < emailList.length; i++) { $("#auto-show").append("<div id='" + (i + 1).toString() + "' onmouseover='setStyle(this)' onmouseout='cancelStyle(this)' >" + emailList[i] + "</div>"); } //handle key's events.(键盘弹出事件处理) emailInput.keyup(function (event) { var myEvent = event || window.event; var keyCode = myEvent.keyCode; //获得键值 //press down key(向下键) if (keyCode == 40) { oldIndex = newIndex; newIndex++; setStyleForChange(); //set value for input setValue(newIndex, emailInput); } //press up key(向上键) if (keyCode == 38) { oldIndex = newIndex; newIndex--; setStyleForChange(); //set value for input setValue(newIndex, emailInput); } //press enter key(回车键) if (keyCode == 13) { //set value for input setValue(newIndex, emailInput); //set div hidden autoHide(); } //press esc key(ESC键) if (keyCode == 27) { autoHide(); } //press a-z|A-Z|0-9 //8对应退格键,46对应删除键 var changedText = (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (keyCode >= 48 && keyCode <= 56); if (changedText) { var currentVal = emailInput.val().replace(/^/s/s*/, '').replace(//s/s*$/, ''); //如果原来已包含有@字符 if (currentVal.indexOf("@") > -1) { emailInput.val(""); for (var i = 1; i <= 6; i++) { $("div #" + i).text("").text(emailList[i - 1]); } return; } for (var i = 1; i <= 6; i++) { $("div #" + i).text("").text(currentVal + emailList[i - 1]); } } //如果按下退格键或删除键 if (keyCode == 8 || keyCode == 46) { emailInput.val(""); for (var i = 1; i <= 6; i++) { $("div #" + i).text("").text(emailList[i - 1]); } } }); });

代码中已有注释,实现不是很复杂,细节处理比较多点。

效果图如下:




原文发布时间为:2011-05-07


本文作者:vinoYang


本文来自云栖社区合作伙伴CSDN博客,了解相关信息可以关注CSDN博客。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
暴力枚举Gmail邮箱地址的新姿势
本文讲的是暴力枚举Gmail邮箱地址的新姿势,本文将介绍一种比较经典的枚举用户Gmail邮箱地址的新思路,这种思路可以检索成千上万个Gmail邮箱地址。
2156 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4475 0
在word文档里提取出所有的邮箱地址
怎样在word文档里提取出所有的邮箱地址 文档内容太多,邮箱也有很多,一个个复制粘贴太浪费时间,怎样把这些邮箱简单的提取出来  答案:用查找功能。 查找目标:[A-z,0-9]{1,}\@[A-z,0-9,\.]{1,} 查找全部即可一次性选中。 如图操作:
790 0
企业公司邮箱选阿里云的理由,阿里云企业邮箱管理功能介绍
阿里云企业邮箱版本有:一.标准版(高速发展期企业首选,按需购买)单帐号不限容量,按需购买定制企业品牌形象数据监控和备份7*24小时 热线+工单支持 二.集团版(适合集团企业,多域多管理后台)单帐号不限容量,按需购买定制企业品牌形象数据监控和备份7*24小时 热线+工单支持子公司独立域独立权限管理子公司独立企业通讯录 三.尊享版(含审批、差旅应用,一站式办公)单帐号不限容量,按需购买定制企业品牌形象数据监控和备份7*24小时 热线+工单支持工作流程自定义与审批差旅出行管理 企业公司邮箱选阿里云?阿里云企业邮箱管理功能介绍:邮件监控:可设定监控帐号与被监控帐号,满足企业对邮箱安全管控需求。
6634 0
+关注
716
文章
646
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载