[模仿微软Live.cn]JavaScript输入邮箱自动提示

原理是：在一个输入框中，当我输入任何字的时候自动下拉相应的邮箱提示，在输入框输入123的时候下拉框有所有123的邮箱输入其他的时候有其他文案对应的邮箱。

同理此插件不需要任何html标签，只需要一个输入框有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。

HTML代码如下：

其实上面的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","@live.com","@sohu.com","@sina.com","@keleyi.com"] 。就是要告诉我们默认邮箱有这么多，不管我输入什么下拉框初始化时候有这么多邮箱提示，当我精确到某一项的时候在给个提示精确到某一项下拉。当然由于需求的变更邮箱这个参数可以自己初始化时候自己根据需求配置。

实现的功能如下：

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

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

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JS输入框邮箱自动提示-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/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="http://keleyi.com/keleyi/phtml/jstexiao/7/emailAutoComplete.js"></script>
</head>
<body>
<div style="width:736px;margin:10px auto;">
<div><h2>JS输入框邮箱自动提示·柯乐义</h2><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm" target="_blank">原文</a></div>
请在下方输入邮箱用户名：
<div class="parentCls">
<input type="text" class="inputElem">
</div>
</div>
</body>
</html>

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

转载于:https://www.cnblogs.com/ranzige/p/html_mail_tips.html

[模仿微软Live.cn]JavaScript输入邮箱自动提示相关推荐

java技术:输入拼音自动提示汉字的方法
今日课题:java项目经理与你共享"有关输入拼音自动提示汉字的方法". 一.java端使用不同的项目获取的方法也是不一样的,但最终都要传入客户端端,这部分就不多说了,有开 ...
sts html自动提醒,STS、Eclipse中编写java、html、javascript文件的自动提示设置 html标签属性提示总结...
总结:STS.Eclipse中编写java.html.javascript文件的自动提示设置 html标签属性提示解决方案: 一.HTML ①鼠标右键点击创建的文件,选择[Properties] ② ...
IOS邮箱登录下拉提示列表--输入邮箱自动填充提示列表(附gif+源码）
前几天的项目里要做个小效果:类似新浪微博那样输入邮箱登录时出现关联的邮箱后缀下拉提示,如下: (上边下拉列表实际是textfiled+tableView,已经封装成小控件,根据项目需求,稍作调整即可直 ...
Android studio输入m自动提示成员变量名称
如图: 设置步骤如下:
输入邮箱时自动提示邮箱后缀
如题所示: 在html中输入邮箱的input要有自己的class,以及自己父元素的class.例如: <div class="parentemail"><inpu ...
php 智能输入提示插件,phph 输入邮箱时自动提示邮箱后缀实现代码
1.在html中输入邮箱的input要有自己的class,以及自己父元素的class.例如: // 初始化 $(function() { new EmailAutoComplete({ parentC ...
java 输入提示_Java实现输入自动提示与补全功能
一. 场景与目标在使用 IDE 开发软件时, IDE 会提供一种"智能提示", 根据所输入的字符列出可能的词组: 在日常Web开发中,根据用户输入进行自动提示和补全,也能很好地改 ...
搜索框内容自动提示bootstrap ajax
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
网页自动加拼音html,javascript实现输入中文自动生成拼音
需求:输入中文,输入框失去焦点后自动生成全写拼音及简写拼音. 分享一款轻量级JS插件:Convert_Pinyin.js(文末可以下载). 只需引入一个JS文件,然后调用对象里在JS方法函数即可,演示 ...

[模仿微软Live.cn]JavaScript输入邮箱自动提示

[模仿微软Live.cn]JavaScript输入邮箱自动提示相关推荐

最新文章

热门文章