web前端|js教程
JS,输入,用户名,自动显示,邮箱,后缀,列表,方法
web前端-js教程
本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法。分享给大家供大家参考。具体如下：
idc程序源码php,ubuntu更改账户密码,360搜索的爬虫,mtsrand php,王科seolzw
以下是代码，保存到html文件打开：
源码管理流程图,vscode重复行 插件,ubuntu 中文输入,tomcat7的安装配置,sqlite3建立索引,网页设计美工要做什么,修改sql数据库密码查询,网站和服务器,jsp分页插件下载,web前端框架难吗,新榜爬虫,Php count,seo的优点,springboot系列,织梦标签调用不成功,秒收录的网站,简单的网页幻灯片代码,免费按模板制作微网站,后台管理模板 html5,wordpress 页面链接,jsp学生管理系统源码,微信小程序 php框架lzw
微交易网站源码.rar,vscode新建文件步骤,ubuntu新增桌面,tomcat日志常见错误,手工自动爬虫,php 子类调用父类变量,seo需要什么人员,支持jsp oracle数据库的网站空间,phpcms修改模板路径lzw
*{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;}
请在下方输入邮箱用户名：
原理是：一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示，在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。
同理 此插件不需要任何html标签，只需要一个输入框 有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。
HTML代码如下：
其实上面的div标签都可以不需要 只需要在input输入框 且父级元素添加一个如上class(自定义也可以，只是在JS初始化的时候要传入class就ok 我默认情况下 父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls，在初始化的时候 直接初始化 传入空对象即可！)。因为页面上可能有多个输入框 所以需要一个父级class 来区分是那个输入框，当然要个隐藏域 存值给开发后台。
其中在配置项里面 有个邮箱数组参数 mailArr : [“@”,”@”,”@”,”@”,”@”,”@”,”@”,”@”,”@”,”@”,”@”] 。就是要告诉我们默认邮箱有这么多，不管我输入什么 下拉框初始化时候有这么多邮箱提示，当我精确到某一项的时候 在给个提示 精确到某一项下拉。当然由于需求的变更 邮箱这个参数可以自己初始化时候 自己根据需求配置。
实现的功能如下：
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;}
emailAutoComplete.js代码点击此处本站下载。
