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本身使用方法也很简单,无需过多的设置就能 ...
随机推荐
- EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(三)
前言 在上一篇中,我们依靠着EasyUI强大的前端布局特性把前端登录界面和主界面给搭建完成了.这一篇我们就要尝试着把整个解决方案部署到云端呢,也就是Visual Studio Online(TFVC) ...
- JS数组常用函数以及查找数组中是否有重复元素的三种常用方法
阅读目录: DS01:常用的查找数组中是否有重复元素的三种方法 DS02:常用的JS函数集锦 DS01.常用的查找数组中是否有重复元素的三种方法 1. var ary = new Array(&qu ...
- Nuget包之间的依赖
为什么我们使用依赖呢??原因是某些资源是基于某些资源的基础上才可以运行的,比如bootstrap基于Jquery,EntityFramework.zh-Hans基于EntityFramework,如果 ...
- Java期末设计（十三周）
一.项目完成计划 十三周和十四周完成用户交互界面的设计(1.登陆界面2.订票以及查询界面3.用户管理界面4.退票界面): 十三周完成登陆界面,十四周完成订票以及查询界面,用户管理界面和 ...
- Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) C.Ray Tracing (模拟或扩展欧几里得)
http://codeforces.com/contest/724/problem/C 题目大意: 在一个n*m的盒子里,从(0,0)射出一条每秒位移为(1,1)的射线,遵从反射定律,给出k个点,求射 ...
- Spring的入门的程序
1 下载Spring的开发包: spring-framework-3.2.0.RELEASE-dist.zip ---Spring开发包 docs :spring框架api和规范 libs :spri ...
- 使用Python scipy linprog 线性规划求最大值或最小值(使用Python学习数学建模笔记)
函数格式 scipy.optimize.linprog(c, A_ub=None, b_ub=None, A_eq=None, b_eq=None, bounds=None, method='simp ...
- JSP内置对象---request对象（用户登录页面（返回值和数组：gerParameter，getParameterValues））
创建两个jsp页面:reg.jsp 和 request.jsp reg.jsp: <%@ page language="java" import="java.uti ...
- How to create your own custom 404 error page and handle redirect in SharePoint 分类： Sharepoint 2015-07-08 00:22 4人阅读 评论(0) 收藏
1. In your MOSS server, make a copy of %systemdrive%\Program Files\Common Files\Microsoft Shared\Web ...
- java目录与classpath
目录结构 描述 jdk bin 编译器和工具 demo 演示 docs HTML格式的类库文档 include ...