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本身使用方法也很简单,无需过多的设置就能 ...
随机推荐
- MINA2 框架详解(转)
Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于TCP/IP.UDP/IP协议栈的通信框架(当然,也可以提供JAVA 对象的序列化服务.虚拟机管道通信服务等),M ...
- HTML 之 head
使用 base 标签使页面中的所有标签在新窗口中打开.<!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- Codeforces Round #384 (Div. 2) 解题报告
这场CF水题都非常的水,D题如果对树.DFS相关比较熟练的话也不难.比赛时前三题很快就过了,可是因为毕竟经验还是太少,D题就卡住了.比赛之后A题还因为没理解对题意fst了--(为什么这次就没人来hac ...
- 三、Python 变量、运算符、表达式
3.1 变量 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,值可以改变,其实是将值在内存中保存地址位交给变量,变量去内存中获取,重新赋值,改变的就是内存地址位. 命名: 变量名由字母.数字 ...
- 阅读摘录《javascript 高级程序设计》01
前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
- #1000 A + B (hihoCoder)
时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 求两个整数A+B的和 输入 输入包含多组数据.每组数据包含两个整数A(1 ≤ A ≤ 100)和B(1 ≤ A ≤ 100) ...
- 执行时关闭标识位 FD_CLOEXEC 的作用
首先先回顾 apue 中对它的描述: ① 表示描述符在通过一个 exec 时仍保持有效(书P63,3.14节 fcntl 函数,在讲 F_DUPFD 时顺便提到) ② 对打开文件的处理与每个描述符的执 ...
- Makefile 一点一滴（二）—— 输出文件到指定路径
先来看最简单的 makefile 文件: TestCpp : TestCpp.o g++ -o TestCpp TestCpp.o TestCpp.o : TestCpp.cpp g++ -c Tes ...
- JDK动态代理与CGLib动态代理
1.JDK动态代理 JDK1.3以后java提供了动态代理技术,允许开发者在运行期创建接口的代理实例,动态代理是实现AOP的绝好底层技术. JDK的动态代理主要涉及到java.lang.reflect ...
- 最后一次PSP
PSP: 一.计划 完成这个任务需要五天左右. 二.开发 1.需求分析: 作为一个排球比赛的现场工作人员,我需要统计每一名球员的得分以及技术统计(如:发球,拦网,一传等等),以便于颁发每场比赛的MVP ...