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本身使用方法也很简单,无需过多的设置就能 ...
随机推荐
- Swift 05.Block
Swift的函数用法还真是灵活.但是个人感觉更灵活的还是闭包. swift闭包的概念大抵相当于OC的block的概念.如果对于block的理解很透彻的话,闭包的原理性的东西还是很好理解的. 剩下的就是 ...
- EntityFramework CodeFirst SQLServer转Oracle踩坑笔记
接着在Oracle中使用Entity Framework 6 CodeFirst这篇博文,正在将项目从SQLServer 2012转至Oracle 11g,目前为止遇到的问题在此记录下. SQL Se ...
- 国内技术管理人员批阅google的“春运交通图”项目（大公司下的高效率）<转载>
在整理一份报告的时候,偶然看到2008年春节期间google推出的“春运交通图”项目建设历程报道,很受启发,随以国内的技术管理人员眼光批阅了这篇文章,同时也是自嘲吧. 以下黑色字体是原报道,红色字体是 ...
- ubuntu ulimit 设置
永久设置ubuntu ulimit 之前是ulimit -n 65535那样设置,不过貌似只是当前环境有效果,重启服务器的话,又失效了...今天无意找到一个设置的方法,可以永久设置ulimit的参数. ...
- 请定义一个宏，比较两个数a、b的大小，不能使用大于、小于、if语句
提供一种算法: #define max(a, b) ((((a)-(b)) + fabs(a-b))?(a):(b))
- Jmeter性能测试入门（转）
出处:http://www.cnblogs.com/by-dream/p/5611555.html Jmeter性能测试步骤 1. 添加线程组之后,先设置这两项: 2. 添加一个http请求 被测的u ...
- Dev 13.2 汉化教程（提供汉化cs文件下载）
主要为了汉化 FindPanel里的Find和Clear控件名称,研究了一些时间. 废话不说.直接上干货. 1.已将cs文件分享,下载放到项目里. 下载链接: http://pan.baidu.com ...
- php防止外链导出的代码
先收藏起来再说! URL跳转代码 1.代码: <? $url=$_GET["url"];header("Location:"."http://& ...
- 灰常好的开源项目[c/c++]
ClibPDF http://cosoft.net.cn http://www2s.biglobe.ne.jp/~Nori/ruby/dist/ClibPDF-ALPHA-20010519.tar.g ...
- 惯性导航之MEMS加速度计原理
一 加速度计原理 1.1 加速度计由MEMS传感器与信号处理芯片组成. 1.2 MEMS加速度计工作原理 由上电容.中电容板(可移动).下电容板等组成:当加速度达到一定值后,中电容板会移动,与上.下电 ...