jquery实现自动补全邮箱地址
开始做的邮箱补全代码
//检查email邮箱
function isEmail(str) {
if (str.indexOf("@") > 0) {
return true;
} else {
return false;
}
}
//绑定自动补全事件
function autoCompleBind() {
var nowid; //当前索引
var totalid; //邮箱总数
var can1press = false; //
var emailafter;
var emailbefor;
var width;
$("#account_login").focus(function() { //文本框获得焦点，插入Email提示层
$("#email_list").remove();
width = $(this).width();
$(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>");
if ($("#email_list").html()) {
$("#email_list").css("display", "block");
$(".newemail").css("width", $("#email_list").width());
can1press = true;
} else {
$("#email_list").css("display", "none");
can1press = false;
}
}).keyup(function() { //文本框输入文字时，显示Email提示层和常用Email
var press = $("#account_login").val();
if (press != "" || press != null) {
var emailtxt = "";
var emailvar = new Array("@163.com", "@126.com", "@yahoo.com", "@qq.com", "@sina.com", "@sina.cn", "@sohu.com", "@gmail.com", "@hotmail.com", "@foxmail.com");
totalid = emailvar.length;
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>";
if (!(isEmail(press))) {
for (var i = 0; i < emailvar.length; i++) {
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>"
}
} 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:"+width+"px; height:15px; color:#6B6B6B; overflow:hidden;'><font color='#D33022' style='padding-left: 8px;'>" + emailbefor + "</font>" + emailvar[i] + "</div>"
}
}
}
$("#email_list").html(emailmy + emailtxt);
if ($("#email_list").html()) {
$("#email_list").css("display", "block");
$(".newemail").css("width", $("#email_list").width());
can1press = true;
} else {
$("#email_list").css("display", "none");
can1press = false;
}
beforepress = press;
$(".newemail").eq(nowid).css("background", "#CACACA").focus();
}
if (press == "" || press == null) {
$("#email_list").html("");
$("#email_list").css("display", "none");
}
})
$(document).click(function() { //文本框失焦时删除层
if (can1press) {
$("#email_list").remove();
can1press = false;
if ($("#account_login").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, "");
$("#account_login").val(newhtml);
$("#email_list").remove();
})
$(document).bind("keydown", function(e) {
if (can1press) {
switch (e.which) {
case 38: //向上按钮
if (nowid > 0) {
nowid = nowid - 1;
$(".newemail").css("background", "#FFF");
$(".newemail").eq(nowid).css("background", "#CACACA").focus();
}
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, "");
$("#account_login").val(newhtml);
$("#email_list").remove();
alert(13);
}
}
})
}
在firefox/chrome/IE6+ 都正常，唯独IE6上定位失效。经过调试，发现IE6下获取的offsetLeft与其他浏览器下不一致，在FF中obj.offsetLeft是当前对象的position:relative的父级元素的偏移,
可是在IE中,obj.offsetLeft是相对于其父级元素的定位。
后来想用jquery获取绝对位置解决此问题，可是又会出现当调整浏览器窗口大小的时候发生位移的情况。于是决定采用相对位移，用jquery获取与父级的相对位移，然后定义父级元素的“position:relative;”属性，使子元素相对该父级元素定位。整理后代码如下：
//检查email邮箱
function isEmail(str) {
if (str.indexOf("@") > 0) {
return true;
} else {
return false;
}
}
//绑定自动补全事件
function autoCompleBind() {
var nowid; //当前索引
var totalid; //邮箱总数
var can1press = false; //
var emailafter;
var emailbefor;
var width;
$("#account_login").focus(function() { //文本框获得焦点，插入Email提示层
$("#email_list").remove();
width = $(this).width();
$(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>");
if ($("#email_list").html()) {
$("#email_list").css("display", "block");
$(".newemail").css("width", $("#email_list").width());
can1press = true;
} else {
$("#email_list").css("display", "none");
can1press = false;
}
})
.keyup(function() { //文本框输入文字时，显示Email提示层和常用Email
var press = $("#account_login").val();
if (press != "" || press != null) {
var emailtxt = "";
var emailvar = new Array("@163.com", "@126.com", "@yahoo.com", "@qq.com", "@sina.com", "@sina.cn", "@sohu.com", "@gmail.com", "@hotmail.com", "@foxmail.com");
totalid = emailvar.length;
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>";
if (!(isEmail(press))) {
for (var i = 0; i < emailvar.length; i++) {
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>"
}
} 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 + "<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>"
}
}
}
$("#email_list").html(emailmy + emailtxt);
if ($("#email_list").html()) {
$("#email_list").css("display", "block");
$(".newemail").css("width", $("#email_list").width());
can1press = true;
} else {
$("#email_list").css("display", "none");
can1press = false;
}
beforepress = press;
$(".newemail").eq(nowid).css("background", "#CACACA").focus();
}
if (press == "" || press == null) {
$("#email_list").html("");
$("#email_list").css("display", "none");
}
})
//焦点移出删除层
.blur(function(){
$("#email_list").remove();
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, "");
$("#account_login").val(newhtml);
$("#email_list").remove();
})
$("form #login_field").bind("keydown", function(e) {
if (can1press) {
switch (e.which) {
case 38: //向上按钮
if (nowid > 0) {
nowid = nowid - 1;
$(".newemail").css("background", "#FFF");
$(".newemail").eq(nowid).css("background", "#CACACA").focus();
}
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, "");
$("#account_login").val(newhtml);
$("#email_list").remove();
}
}
})
}
为了防止在点击回车选择email选项的时候 直接提交表单，故对回车事件做了处理。当当前input元素不是submmit时，索引到下一个input元素，如果是 则直接提交表单。
//绑定回车事件，防止点击回车直接提交form
function autoEnterDown(){
$("form input").keypress(function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var length = this.form.elements.length;
if (keyCode == 13){
if (this == this.form.elements[length-2]){
return true;
}else{
var i;
for (i = 0; i < length; i++)
if (this == this.form.elements[i])
break;
i = (i + 1) % length;
this.form.elements[i].focus();
return false;
}
}
else
return true;
});
}
在查阅资料时，发现JS中的的offsetLeft与jquery的offset().left 是不同的。在JS中，offsetLeft表示与父标签的左边距的距离；而在JQUERY中，offset().top表示与距窗口最左侧的距离，相当于将JS中此标签所有的父结点、父父结点……的offsetLeft相加起来的值；
用JS代码表示JQUERY的offset().left为：
function getClientLeftTop(el){
var temp=el;
var left = temp.offsetLeft, top = temp.offsetTop;
while(temp=temp.offsetParent)
{
left+=temp.offsetLeft;
top +=temp.offsetTop;
} //得到DIV窗口的绝对距离；
var a={
left:left,
top:top
}
return a;
}
上述代码中，返回的两个值a.left相当于jquery的offset().left 而a.top相当于jquery的offset().top
jquery实现自动补全邮箱地址的更多相关文章
- jQuery AutoComplete 自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- jquery.autocomplete自动补全功能
项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...
- jquery autocomplete自动补全
简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...
- Bootstrap Typeahead/Jquery autocomplete自动补全
使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...
- Nginx 自动补全url地址补全最后的斜线
参考地址: http://blog.csdn.net/dong123dddd/article/details/51660368 location /riskcontrol { root /data; ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- js邮箱自动补全
邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- autocomplete实现联想输入，自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全
导读 行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛.一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器.QLineEdit本身使用方法也很简单,无需过多的设置就能 ...
随机推荐
- kettle 使用JAVA代码进行执行
kettle 设计完成之后,可以在设计工具中进行调用,也可以使用java代码进行调用. 1.通过文件方式执行转换. public static void runTransfer(String[ ...
- WCF初探-27：WCF中的实例化
理解WCF中的实例化机制 “实例化”是指对用户定义的服务对象以及与其相关的 InstanceContext 对象的生存期的控制.也就是说我们的客户端程序在调用服务端方法时,需要实例化一个服务端代理类对 ...
- Spring Boot中的注解
文章来源:http://www.tuicool.com/articles/bQnMra 在Spring Boot中几乎可以完全弃用xml配置文件,本文的主题是分析常用的注解. Spring最开始是为了 ...
- java常用基础知识点 （持续追加）
作为一个Java编程人,会经常用上JDK中的大量的API类库,常用的有字符串操作.集合操作.文本操作.输入输出操作.以及网络操作, 常用的包: 1. java.lang Java程序的基础类,字符串, ...
- C语言中内存对齐
今天一考研同学问我一个问题,一个结构体有一个int类型成员和一个char类型成员,问我这个结构体类型占多少个字节,我直接编个程序给他看结果.这个结构体占八个字节,咦,当时我蛮纳闷的,一个int类型四个 ...
- 求最长回文子串：Manacher算法
主要学习自:http://articles.leetcode.com/2011/11/longest-palindromic-substring-part-ii.html 问题描述:回文字符串就是左右 ...
- 作业七：团队项目——Alpha版本冲刺阶段002
今日进展:我们终于安装好了软件,今天开始进行作业设计. 今日安排:今天开始我们要开始我们的框架的设计.
- 自定义javascript log方法
/** * 类似chrome,firefox的console对象 * 但是在IE等不支持console的浏览器不会报错 * 理论上浏览器支持的console的方法都支持,比如谷歌的 * assert, ...
- knockout应用开发指南（完整版）
http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
- maven的使用体验
由于之前是从C++代码阵营中转到java阵营的(这里可能还会转到scala阵营中).在写工程代码的时候,如果是只是简单的创建java project的话,当然也是可以的.但是,随着项目慢慢扩大,组件越 ...