用面向对象解决 输入用户名自动显示邮箱后缀列表的方法
来源:互联网 发布:域名怎么接入阿里云 编辑:程序博客网 时间:2024/05/01 11:14
转载地址: http://www.cnblogs.com/parkboyoung/p/6031695.html
当我们注册或者登录要用邮箱格式时会显示邮箱后缀的提示下拉框
效果如图所示
主要介绍了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索引存入一个全局变量当中,这样就可以告诉“向上”或“向下”按键时,的起始位置了;
- 用面向对象解决 输入用户名自动显示邮箱后缀列表的方法
- JS输入用户名自动显示邮箱后缀列表的方法
- JS输入用户名自动显示邮箱后缀列表
- 2种方法,当文本框输入@自动补全邮箱后缀(特别是命名空间的引用,共三种方法)
- VC++ 输入.或者->无法显示对象成员列表解决备忘
- 【Android】自定义控件实现自动补齐邮箱后缀的输入框
- 自动填充邮箱后缀
- IOS邮箱登录下拉提示列表--输入邮箱自动填充提示列表(附gif+源码)
- 自动配置邮箱的方法
- 批量修改AD账号的UPN后缀(同适用于解决外网自动配置Exchange邮箱)
- AutoCompleteTextView自动填充邮箱后缀
- 【GitHub】解决每次push代码到github都需要输入用户名和密码的方法
- 手机号、邮箱或者用户名登录的实现方法
- table表格 列表 显示边框 解决之间的空白方法
- Android studio 无法显示引用对象的方法提示列表
- 邮箱自动下拉匹配列表
- 编写代码时如何使Eclipse自动显示提示输入的列表
- 面向对象的方法
- double 取 四舍五入
- Python推导式介绍
- 车道线检测霍夫直线检测原理分析
- 按键中断消斗的集合与进阶
- C++类接口和头文件概述
- 用面向对象解决 输入用户名自动显示邮箱后缀列表的方法
- 快速 排序的思想并实现一个快排?
- 分布式框架-Dubbox介绍
- 思辨人工智能 IBM Watson在帮每个人实现无限可能
- 14.ProcessBar进度条的应用实例:模拟两个进度条加载
- js模块化编程总结
- fake-useragent User Agent 伪装
- 基于Agile Lite开发框架实现底部导航切换页面
- 关于mysql字符串与时间戳