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本身使用方法也很简单,无需过多的设置就能 ...
随机推荐
- ionic 集锦
一.隐藏返回按钮 场景:登录.注册成功后,阻止返回 //方法一 $ionicHistory.currentView($ionicHistory.backView()); $state.go('home ...
- iOS开启隐藏文件以及显示文件方法
显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:defaults write com.apple.finder A ...
- strlcpy和strlcat
strncpy 等主要的问题还是虽然不会溢出,但是满了就不给缓冲区添加0结束符了,以前在项目里面自己还写了个 safe_strcpy 现在发现早就有了 http://blog.csdn.net/lin ...
- Bootstrap<基础九>辅助类
Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-mu ...
- python学习08——类
笨办法学python第42节,这节讲的是类,程序沿用上一节中一个游戏,不同的是这一节用了类的方法. 其中改动的代码主要如下 原来的最后几句用了这样的代码: ROOMS = { 'death':deat ...
- Nginx中的进程亲和性 affinity
Nginx采用多进程Master/Worker结构,Worker进程数为CPU个数时工作效率最高,Nginx通过affinity为每个Worker进程绑定一个CPU,避免进程切换带来的消耗,同时能够保 ...
- curl post
//Post方式实现 $url = "http://localhost/web_services.php"; $post_data = array ("username& ...
- jquery 层根据矩形路径移动和闪耀（原创）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>De ...
- Also unsere eigene Christian Louboutin Webshop bietet die überragende Christian Louboutin Schuhe uk schiebt zusammen mit kostengünstigen Wert
www.heelschuhe.de, Es ist wirklich eine der Frauen erfordern immer interessant und auch Louboutin Pu ...
- 初学者的python学习笔记2——作业篇
这次的作业是商城展示,最开始的确是一脸懵逼,后来研究了一下网上的例子,总算是搞出来了一个(其实算是网上列子的简化版?). 最开始是想要使用字典去做,发现显示列表的时候怎么也无法实现序号和名称对应,原因 ...