标签：需要 sina 正则 变量 事件绑定 回车 循环 focus height
---恢复内容开始---
当我们注册或者登录要用邮箱格式时会显示邮箱后缀的提示下拉框
效果如图所示
主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能，
原理是：一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示，在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。
同理 此插件不需要任何html标签，只需要一个输入框 有相对应的id类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的
下面便是此功能代码;
此段代码引用了jq 所以需要先引入jq.js;
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
把我们需要提示的邮箱后缀存入数组；
var emailsorce = ["@sina.com", "@163.com", "@qq.com", "@126.com", "@vip.sina.com",
"@sina.cn", "@hotmail.com", "@gmail.com", "@sohu.com", "@yahoo.cn", "@139.com",
"@wo.com.cn", "@189.cn"];
接下来就是面向对象的内容，中间都有注释；
var email={
init:function(){
var that=this;
$("#email").focus(function(){
if($(this).val()==""){
that.hint();
}else{
$("#closeuser").css({"display": "block"});//消除按钮显示
}
})
},
bindeven:function(){
this.chose();
this.delet();
this.miss();
},
miss:function(){//失去焦点删除按钮隐藏 下拉选项消失 判断是否为邮箱格式
$("#email").blur(function(){
$("#closeuser").css({"display": "none"});
$("#sele").css({"display": "none"});
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//邮箱正则表达式
if(filter.test($("#email").val())){//是邮箱格式
$("#email").css({"border":"0.1rem solid #0cbd19"})
}else{//不是邮箱格式
$("#email").css({"border":"0.1rem solid #ff072f"})
}
})
},
hint:function(){//初始输入出现邮箱选项 消除按钮出现
var that=this;
$("#email").on("input",function(){
if($(this).val()!=""){
if($(this).val().indexOf("@")==-1){//是否输入到@
$("#sele").html("");//每次输入初始化
$("#sele").css({"display": "block"});
for(var i=0;i<emailsorce.length;i++){//把集合的邮箱加入li中
var li=$("<li>"+$(this).val()+emailsorce[i]+"</li>");
$("#sele").append(li);
}
$("#closeuser").css({"display": "block"});//消除按钮显示
}else{
var arr=$(this).val().split("@");
if(arr[1]!=""){//筛选@之后的内容
$("#sele").html("");//每次输入初始化
for(var i=0;i<emailsorce.length;i++){
var temp=emailsorce[i].split(".")[0];
if(temp.indexOf(arr[1])!=-1){//筛选选项是否含有输入的内容 有显示 没有隐藏
var li=$("<li>"+arr[0]+emailsorce[i]+"</li>");
$("#sele").append(li);
}
}
}
}
}else{
//单框内没内容消除按钮隐藏 下拉选项隐藏
$("#closeuser").css({"display": "none"});
$("#sele").css({"display": "none"});
}
})
},
chose:function(){
$(document).on("touchstart","#sele li",function(){
//点击下拉框选项 框内内容为点击选项 下拉框消失 删除按钮消失
$("#email").val($(this).html());
$("#closeuser").css({"display": "none"});
$("#sele").css({"display": "none"});
})
},
delet:function(){
//框内内容删除 下拉框隐藏
$(document).on("touchstart","#closeuser",function(){
//点击消除按钮事件
$("#email").val("");
$("#sele").css({"display": "none"});
$("#closeuser").css({"display": "none"});
})
}
}
下面只要调用就ok了；
email.init(); email.bindeven();
一、功能分析： 1.input输入框的值，发生变化时，显示提示的下拉层; 2.input输入框的值，发生变化时，显示提示的下拉层，会根据输入的内容自动往“@”前面添加; 3.input输入框的值，发生变化时，显示提示的下拉层，会根据输入的内容对下拉层“@”后面的内容进行筛选; 4.点击下拉层里面的提示内容，会将其值，填充到输入框; 5.按下鼠标回车键会将其选中的下拉层里的内容，填充到输入框; 6.按键盘的“向上”或“向下”的方向键，可以在下拉层的选项中移动（循环移动，改变当前LI的背景色）; 7.鼠标悬停在下拉层的LI上面时，会有一个背景色。 二、功能实现： 1.input输入框的值，发生变化时的事件是：propertychange（IE）或input(标准); 2.在发生propertychange事件的时候，取其输入框的值，再取其“@”前面的值，并赋值给下拉层里面的LI加上LI的email属性值; 3.在发生propertychange事件的时候， 3.1取其输入框的值，再取其“@”后面的值， 3.2并将这个值与下拉层里面的LI的email属性值进行正则匹配; 这里要注意,正则字面量方法，是不能用变量的。所以这里用的是new方式。 这里的正则是取的输入框“@”后面的值，所以正则，是变化的。而LI的EMAIL属性值是不变的 4.这里用了一个事件委托方式，将点击事件绑定给document，然后通过判断，点击时最初触发的DOM元素，是什么。来决定， 4.1否隐藏下拉提示层？ 4.2还是需要将下拉层，选中的值，赋给输入框 (这里不能直接使用，当输入框失去焦点时，隐藏下拉提示层，因为会与点击下拉层，将其值填入输入框，这个功能有逻辑上的矛盾;) 5.和上面第4条差不多; 6.就是要注意，在鼠标悬停时，把当前的LI索引存入一个全局变量当中，这样就可以告诉“向上”或“向下”按键时，的起始位置了;
标签：需要 sina 正则 变量 事件绑定 回车 循环 focus height
原文地址：http://www.cnblogs.com/parkboyoung/p/6031695.html
