JS输入用户名自动显示邮箱后缀列表的方法
本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法。分享给大家供大家参考。具体如下:
以下是代码,保存到html文件打开:
<html>
<head>
<meta charset="UTF-8">
<title>输入用户名自动显示邮箱后缀列表</title>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {display:none;}
</style>
<script type="text/javascript" src="js/emailAutoComplete.js"></script>
</head>
<body>
<div style="width:736px;margin:10px auto;">
请在下方输入邮箱用户名:
<div class="parentCls">
<input type="text" class="inputElem">
</div>
</div>
</body>
</html>
原理是:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。
同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要。内部的HTML代码都是自动生成的。
HTML代码如下:
<input type="text" class="inputElem">
</div>
其实上面的div标签都可以不需要 只需要在input输入框 且父级元素添加一个如上class(自定义也可以,只是在JS初始化的时候要传入class就ok 我默认情况下 父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls,在初始化的时候 直接初始化 传入空对象即可!)。因为页面上可能有多个输入框 所以需要一个父级class 来区分是那个输入框,当然要个隐藏域 存值给开发后台。
其中在配置项里面 有个邮箱数组参数 mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告诉我们默认邮箱有这么多,不管我输入什么 下拉框初始化时候有这么多邮箱提示,当我精确到某一项的时候 在给个提示 精确到某一项下拉。当然由于需求的变更 邮箱这个参数可以自己初始化时候 自己根据需求配置。
实现的功能如下:
1. 支持键盘上下移键盘操作,支持鼠标点击及按回车操作。
2. 点击document时候 除当前input输入框之外 下拉框隐藏。当接着输入时候 实现自动匹配等等操作。
具体不多说 就是类似于网上注册时候 邮箱自动提示功能一样 ,如果有任何bug的话 可以给我留言,就不罗嗦了!
CSS代码如下:
*{margin:0;padding:0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {display:none;}
</style>
emailAutoComplete.js代码点击此处本站下载。
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
- JS输入用户名自动显示邮箱后缀列表的方法
- JS输入用户名自动显示邮箱后缀列表的方法
- 用面向对象解决 输入用户名自动显示邮箱后缀列表的方法
- 用面向对象解决 输入用户名自动显示邮箱后缀列表的方法
- JS输入用户名自动显示邮箱后缀列表
- 应用emailAutoComplete.js来自动显示邮箱后缀列表
- 2种方法,当文本框输入@自动补全邮箱后缀(特别是命名空间的引用,共三种方法)
- js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(二)
- 输入邮箱时自动提示邮箱后缀
- 注册JQuery使用ajax调用后台方法,判断用户名、邮箱是否存在,并显示隐藏提示
- JS会自动调用toString()方法来显示日期(即“Date对象的内容”)
- IOS邮箱登录下拉提示列表--输入邮箱自动填充提示列表(附gif+源码)
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- 编写代码时如何使Eclipse自动显示提示输入的列表
- angular2中自动显示下拉列表在火狐浏览器中闪烁的解决方法
- JS实现在输入框内输入@时,邮箱账号自动补全
- HTML DOM focus()和blur()方法 输入框鼠标指过自动消失鼠标离开显示 js
- 关于JLable列表的自动滚动条的显示:当JLable列表的内容超出JPanel面板所规定的高度时,自动显示滚动条的方法
- 去掉系统启动时提示输入用户名及密码 ,Windows XP自动登录设置方法(转)
- js实现用户输入的小写字母自动转大写字母的方法