JS输入用户名自动显示邮箱后缀列表的方法

网络编程 2021-07-04 21:47www.168986.cn编程入门

这篇文章主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法。分享给大家供大家参考。具体如下

以下是代码，保存到html文件打开

代码如下:

<!doctype 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代码如下

代码如下:

<div class="parentCls">

<input type="text" class="inputElem">

</div>

其实上面的div标签都可以不需要只需要在input输入框且父级元素添加一个如上class(自定义也可以，只是在JS初始化的时候要传入class就ok 我默认情况下父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls，在初始化的时候直接初始化传入空对象即可！)。因为页面上可能有多个输入框所以需要一个父级class 来区分是那个输入框，要个隐藏域存值给开发后台。

其中在配置项里面有个邮箱数组参数 mailArr : ["@qq.","@qq2.","@gmail.","@126.","@163.","@hotmail.","@yahoo.","@yahoo..","@live.","@sohu.","@sina."] 。就是要告诉我们默认邮箱有这么多，不管我输入什么下拉框初始化时候有这么多邮箱提示，当我精确到某一项的时候在给个提示精确到某一项下拉。由于需求的变更邮箱这个参数可以自己初始化时候自己根据需求配置。

实现的功能如下

1. 支持键盘上下移键盘操作，支持鼠标点击及按回车操作。

2. 点击document时候除当前input输入框之外下拉框隐藏。当接着输入时候实现自动匹配等等操作。

具体不多说就是类似于网上注册时候邮箱自动提示功能一样，如果有任何bug的话可以给我留言，就不罗嗦了！

CSS代码如下

代码如下:

<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>

emailAutoComplete.js代码点击此处。

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：js的toUpperCase方法用法实例下一篇：js判断鼠标左、中、右键哪个被点击的方法

JS输入用户名自动显示邮箱后缀列表的方法

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

JS输入用户名自动显示邮箱后缀列表的方法

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设