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



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

 



 

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

 

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


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

 

效果图如下:



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



版权声明:本文为博主原创文章,未经博主允许不得转载。