emailautocomplete
CSS代码:
.emailist{border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden;}
.emailist li{padding:2px 11px; cursor:pointer;}
.emailist .on, .emailist li:hover{background-color:#eee;}
HTML代码:
<input type="email" class="input inputMailList" name="email" placeholder="请输入邮箱" required autofocus autocomplete="off">
JS代码:
$(".inputMailList").mailAutoComplete();
转自:http://www.zhangxinxu.com/study/201304/mail-autocomplete-demo.html
/*jquery.mailAutoComplete-4.0.js*/ (function($) {
$.fn.mailAutoComplete = function(options) {
var defaults = {
className: "emailist",
email: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
zIndex: 11
};
// 最终参数
var params = $.extend({}, defaults, options || {}); // 是否现代浏览器
var isModern = typeof window.screenX === "number", visibility = "visibility";
// 键值与关键字
var key = {
"up": 38,
"down": 40,
"enter": 13,
"esc": 27,
"tab": 9
};
// 组装HTML的方法
var fnEmailList = function(input) {
var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
$.each(params.email, function(index, email) {
if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {
arrEmailNew.push(email);
}
});
$.each(arrEmailNew, function(index, email) {
htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index? ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>';
});
return htmlEmailList;
};
// 显示还是隐藏
var fnEmailVisible = function(ul, isIndexChange) {
var value = $.trim(this.value), htmlList = '';
if (value === "" || (htmlList = fnEmailList(this)) === "") {
ul.css(visibility, "hidden");
} else {
isIndexChange && (this.indexSelected = -1);
ul.css(visibility, "visible").html(htmlList);
}
}; return $(this).each(function() {
this.indexSelected = -1;
// 列表容器创建
var element = this;
var eleUl = $('<ul></ul>').css({
position: "absolute",
marginTop: element.offsetHeight,
minWidth: element.offsetWidth - 2,
visibility: "hidden",
zIndex: params.zIndex
}).addClass(params.className).bind("click", function(e) {
var target = e && e.target;
if (target && target.tagName.toLowerCase() === "li") {
$(element).val(target.innerHTML).trigger("input");
$(this).css(visibility, "hidden");
element.focus(); // add on 2013-11-20
}
});
$(this).before(eleUl);
// IE6的宽度
if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } // 不同浏览器的不同事件
isModern? $(this).bind("input", function() {
fnEmailVisible.call(this, eleUl, true);
}): element.attachEvent("onpropertychange", function(e) {
if (e.propertyName !== "value") return;
fnEmailVisible.call(element, eleUl, true);
}); $(document).bind({
"click": function(e) {
var target = e && e.target, htmlList = '';
if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
eleUl.css(visibility, "visible").html(htmlList);
} else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
eleUl.css(visibility, "hidden");
}
},
"keydown": function(e) {
var eleLi = eleUl.find("li");
if (eleUl.css(visibility) === "visible") {
switch (e.keyCode) {
case key.up: {
element.indexSelected--;
if (element.indexSelected < 0) {
element.indexSelected = -1 + eleLi.length;
}
e.preventDefault && e.preventDefault();
break;
}
case key.down: {
element.indexSelected++;
if (element.indexSelected >= eleLi.length) {
element.indexSelected = 0;
}
e.preventDefault && e.preventDefault();
break;
}
case key.enter: {
e.preventDefault();
eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
eleUl.css("visibility", "hidden");
break;
}
case key.tab: case key.esc: {
eleUl.css("visibility", "hidden");
break;
}
}
if (element.indexSelected !== -1) {
eleUl.html(fnEmailList(element));
}
}
}
});
});
};
})(jQuery);
emailautocomplete的更多相关文章
- 应用emailAutoComplete.js来自动显示邮箱后缀列表
我们经常有邮箱的人都特别清楚,在输入我们的邮箱时,会自动显示出邮箱后缀列表,这个用户体验是不错的. 操作据悉——当我们输入文字时,会自动有个邮箱后缀名的列表. 而我这边的代码是,应用jque ...
- js邮箱自动补全
邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jquery 实现邮箱输入自动提示功能:(二)
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- JS输入框邮箱自动提示(带有demo和源码)(转载)
今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...
- jquery仿邮箱文本输入框自动加载邮箱后缀
在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错,使用起来很方便,几乎不用写神呢代码.&quo ...
- requirejs 加载其它js
基本代码: require.config({ // baseUrl : '/js/' paths: { jquery: '/js/jquery-1.11.3.min', validate: '/js/ ...
- JS输入框邮箱自动提示(带有demo和源码)
今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...
- 25个可遇不可求的jQuery插件
随着jQuery插件在网站建设过程中的使用率不断的增加,所以有必要跟进时代步伐开发出一些新的插件/代码片段,以此来巩固并提高前端用户体验,将用户体验提升到一个新的高度. 接下来所推荐的这些插件中有滑块 ...
- [模仿微软Live.cn]JavaScript输入邮箱自动提示
原理是:在一个输入框 中,当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入123的时候 下拉框有所有123的邮箱 输入其他的时候 有其他文案对应的邮箱. 同理 此插件不需要任何html标签, ...
随机推荐
- vs 预编译命令行
xcopy "$(SolutionDir)\Transight_FY_DataExchange_UI\CuscapiUpdaterServer.xml" /i /d /y
- C基础 工程中常用的排序
引言 - 从最简单的插入排序开始 很久很久以前, 也许都曾学过那些常用的排序算法. 那时候觉得计算机算法还是有点像数学. 可是脑海里常思考同类问题, 那有什么用呢(屌丝实践派对装逼学院派的深情鄙视). ...
- .build_release/lib/libcaffe.so: undefined reference to `cv::VideoCapture::set(int, double)'
CXX/LD -o .build_release/tools/convert_imageset.bin.build_release/lib/libcaffe.so: undefined referen ...
- Win10下Anaconda3安装CPU版本TensorFlow并使用Pycharm开发
环境:windows10 软件:Anaconda3 1.安装Anaconda 选择相应的Anaconda进行安装,下载地址点击这里,下载对应系统版本的Anaconda3. 运行 开始菜单->An ...
- ServerSocket和Socket通信
服务器端: 1.服务器端建立通信ServerSocket对象,并设置端口号 2.服务器建立Socket接收客户端连接 3.建立IO输入流读取客户端发送的数据 4.建立IO输出流向客户端输出数据 客户端 ...
- JAVA 语言类的特性(成员、重载、构造方法、静态成员)
一.类的私有成员和公有成员 1.私有成员 修饰符private 如果在类的声明前加上修饰符private,则无法从该类的外部访问到该类的内部成员,而只能被该类自身访问和修改,而不嗯那个被其他类, ...
- 何時需要重启 OFBiz
你在做如下更改時需要重新启動OFBiz服務器: - Java文件(記得要重新編譯) - 配置/.properties文件 - entitymodel或entitygroup XML定義文件 - 服務或 ...
- Go语言中的匿名函数和闭包的样子
1). 函数也是值,可以像普通值那样,传来传去: 2). 匿名函数: 3). 函数的类型,类似于:func(float64,float64) float64 ===================== ...
- C++ cin.ignore()用法
cin.ignore(int a,char b); a为一行中最大读取字符长度,b为某一个字符.在缓冲区中寻找b,找到后忽略b以前的所有字符(包括b).如果在a的范围内还没有找到b,则忽略b以前的所有 ...
- Nginx的基本理论
Nginx是什么? 1).Nginx 就是一台反向代理服务器,代理服务器一般是指局域网内部的机器通过代理服务发送请求到互联网上的服务器,代理服务器一般作用于客户端.比如GoAgent,FQ神器. 一个 ...