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

开发者社区> 开发与运维> 正文

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

简介:

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

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

实现的时候,首先在页面上放一个输入文本框和一个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博客。

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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章