一款jquery智能提示邮箱列表特效

最新推荐文章于 2024-07-15 13:17:25 发布
最新推荐文章于 2024-07-15 13:17:25 发布
阅读量262 收藏
点赞数
文章标签： xhtml javascript 前端 ViewUI 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一款jquery智能提示邮箱列表特效_www.jqshare.com</title>
<meta name="description" content="jquery autoMail输入框特效类似百度输入框智能邮箱后缀名提示功能。是一个比较人性化的用户体验设计。jquery下载,jquery插件。" />

</head>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/autoMail.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#email').autoMail({
		emails:['qq.com','163.com','126.com','sina.com','sohu.com','yahoo.cn','gmail.com','hotmail.com','live.cn']
	});
});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.demo{width:300px;margin:40px auto;}
/* mailBox */
#mailBox{background:#fff;border:1px solid #ddd;padding:3px 5px 5px;position:absolute;z-index:9999;display:none;-webkit-box-shadow:0px 2px 7px rgba(0, 0, 0, 0.35);-moz-box-shadow:0px 2px 7px rgba(0, 0, 0, 0.35);}
#mailBox p{width:100%;margin:0;padding:0;height:20px;line-height:20px;clear:both;font-size:12px;color:#ccc;cursor:default;}
#mailBox ul{padding:0;margin:0;}
#mailBox li{font-size:12px;height:22px;line-height:22px;color:#939393;font-family:'Tahoma';list-style:none;cursor:pointer;overflow:hidden;}
#mailBox .cmail{color:#000;background:#e8f4fc;}
</style>

<div class="demo">
	<form action="">
		<input id="email" type="text" name="email" />
		<input type="submit" value="提交" />
	</form>
</div>
<div style="text-align:center;clear:both; font-size:12px; margin-top:200px; ">
<p><a href="http://www.jqshare.com" target="_blank">jQuery特效</a>分享网站整理</p>
<p>欢迎大家进群讨论前端技术知识！jQuery分享交流群:171845447<strong>
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=7dfb5f39e8414eaef6d58f6828e65e648f962161766866f69d79709c1e11f971">
	<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="jQuery分享交流①群" title="jQuery分享交流①群">
</a></strong></p>  
<br />
<p>适用浏览器：IE6,IE7,IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 特效来源：jsfoot</p>
</div>
</body>
</html>





(function($){
	$.fn.autoMail = function(options){
		var opts = $.extend({}, $.fn.autoMail.defaults, options);
		return this.each(function(){
			var $this = $(this);
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			
			var top = $this.offset().top + $this.height() + 6;
			var left = $this.offset().left;
			var $mailBox = $('<div id="mailBox" style="top:'+top+'px;left:'+left+'px;width:'+$this.width()+'px"></div>');
			$('body').append($mailBox);
			
			//设置高亮li
			function setEmailLi(index){
				$('#mailBox li').removeClass('cmail').eq(index).addClass('cmail');
			}
			//初始化邮箱列表
			var emails = o.emails;
			var init = function(input){
				//取消浏览器自动提示
				input.attr('autocomplete','off');
				//添加提示邮箱列表
				if(input.val()!=""){
					var emailList = '<p>请选择邮箱类型</p><ul>';
					for(var i = 0; i < emails.length; i++) {
						emailList += '<li>'+input.val()+'@'+emails[i]+'</li>';
					}
					emailList += '</ul>';
					$mailBox.html(emailList).show(0);
				}else{
					$mailBox.hide(0);
				}
				//添加鼠标事件
				$('#mailBox li').hover(function(){
					$('#mailBox li').removeClass('cmail');
					$(this).addClass('cmail');
				},function(){
					$(this).removeClass('cmail');
				}).click(function(){
					input.val($(this).html());
					$mailBox.hide(0);
				});
			}
			//当前高亮下标
			var eindex = -1;
			//监听事件
			$this.focus(function(){
				if($this.val().indexOf('@') == -1){
					init($this);
				}else{
					$mailBox.hide(0);
				}
			}).blur(function(){
				setTimeout(function(){
					$mailBox.hide(0);
				},1000);//
			}).keyup(function(event){
				if($this.val().indexOf('@') == -1){
					//上键
					if(event.keyCode == 40){
						eindex ++;
						if(eindex >= $('#mailBox li').length){
							eindex = 0;
						}
						setEmailLi(eindex);
					//下键
					}else if(event.keyCode == 38){
						eindex --;
						if(eindex < 0){
							eindex = $('#mailBox li').length-1;
						}
						setEmailLi(eindex);
					//回车键
					}else if(event.keyCode == 13){
						if(eindex >= 0){
							$this.val($('#mailBox li').eq(eindex).html());
							$mailBox.hide(0);
						}
					}else{
						eindex = -1;
						init($this);
					}
				}else{
					$mailBox.hide(0);
				}
			//如果在表单中，防止回车提交
			}).keydown(function(event){
				if(event.keyCode == 13){
					return false;
				}
			});
		});
	}
	$.fn.autoMail.defaults = {
		emails:[]
	}
})(jQuery);


不讲理的胖子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现输入框邮箱提示效果
06-12
我们经常在注册页面邮箱填写的input 输入框内，输入邮箱的时候底部出现一些163，QQ，gmail等等的一些提示，这种效果是简单的JS实现的，今天给大家推荐的就是
jquery 邮箱登录框提示效果
lampsunny的专栏
03-24 1053
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 邮箱登录框提示效果 //var ft=[1,2,3,4,5]; //var ArrayItemValue=ft[1]; //alert(ArrayItemValue); $(function()
jQuery 实现邮箱下拉列表自动补全功能
美奇软件开发工作室
03-11 286
一、HTML代码 &lt;form method="post" action="#"&gt; &lt;dl&gt; &lt;dt&gt;Email：&lt;/dt&gt; &lt;dd&gt; &lt;input id="email" type="text" placeholder=
jQuery实现邮箱下拉列表自动补全功能
01-21
记得，在上个项目中，遇到这样一个需求，网站要求填写邮箱的时候，还没有填写完，就会出现一系列下拉列表，帮助自动补全邮箱的功能。今天小编给给大家分享下我基于jquery是怎么实现此功能的！ 功能简述 •填写邮箱名字，出现下拉列表，自动补全邮箱 •点击上下按键，选取下拉列表邮箱 •按回车键，选中列表内容，隐藏下拉列表 •鼠标经过，下拉列表选项设置为高亮 •鼠标点击，选中下拉列表选项，隐藏下拉列表 HTML HTML代码很简单，我们就一个简单的输入框，然后一个ul标签，在内部可以放好多li标签。 <html> <head> <meta charset=utf-8/> <script
Dreammail 下载与安装
kissradish的博客
08-27 550
CyMail（畅邮）官网：http://www.cy-email.com CyMail（畅邮）论坛：http://www.cy-email.com/bbs a 一、官网论坛 1.1、官网预览 1.2、软件下载 二、软件安装 2.1、开始安装 2.2、选择位置 2.3、开始菜单 2.4、快捷方式 2.5、正在安装 2.6、安装完成 下载 安装 下载安装 down 畅邮下载 畅邮安装 链接进入原文参与讨论：http://www.cy-email.com/help/xzyaz 如有疑问请发.
jquery 仿百度输入框智能提示邮箱后缀名特效源码.zip
11-16
"jQuery 仿百度输入框智能提示邮箱后缀名特效"是这样一种技术，它能够帮助用户在输入邮箱时自动完成邮箱后缀名，使得输入过程更为便捷。本篇文章将详细解析这一功能的实现原理与关键代码。 一、jQuery简介 jQuery是...
jquery输入框邮箱下拉提示层特效代码
03-20
【jQuery输入框邮箱下拉提示层特效代码】是一种在网页表单中实现的交互功能，主要应用于用户在输入邮箱地址时提供智能提示。这个特效基于JavaScript库jQuery，它能够为输入框添加动态下拉提示，当用户开始输入时，会...
输入框邮箱下拉智能提示
06-01
标题中的“输入框邮箱下拉智能提示”是指在网页中设计的一种交互功能，它通常用于增强用户体验，当用户在输入框中输入邮箱地址时，系统会自动显示一个下拉列表，列出与已输入部分匹配的邮箱地址建议。这种功能常见于...
jQuery超棒动态表单验证效果特效代码
03-20
本篇将重点介绍"jQuery超棒动态表单验证效果特效代码"，这是一种利用jQuery实现的高效且友好的用户反馈机制。 首先，表单验证是前端开发中必不可少的功能，用于确保用户提交的数据符合预设的规则，例如邮箱格式、...
JQUERY用户登陆界面特效
11-08
2. **表单验证插件**：如`validate.js`，这是一个非常流行的jQuery插件，可以轻松实现表单验证，包括必填项、邮箱格式、手机号码等，提供友好的错误提示。 3. **动画效果**：jQuery的`fadeIn()`, `fadeOut()`, `...
JQ 完美仿qq邮件功能
03-31
jquery仿qq邮箱收件人 可以从右侧添加人到输入框类，可以添加人
过目不忘 JS 正则表达式
Programmer小卫
07-19 2530
正则表达式，有木有人像我一样，学了好几遍却还是很懵圈，学的时候老明白了，学完了忘光了。好吧，其实还是练的不够，所谓温故而知新，可以为师矣，今天就随我来复习一下这傲娇的正则表达式吧。为啥要有正则表达式呢？其实就是因为计算机笨（这话不是我说的），比如123456@qq.com，我们一看就是邮箱，可是计算机不认识啊，所以我们就要用一些计算机认识的语言，来制定好规则，告诉它符合这个规则的就是个邮箱，这样计
jq邮箱自动补全提示
chunzhouku2343的博客
07-14 548
需要输入内容和@才会显示的邮箱补全提示，方便可以输入（手机号/用户名/邮箱）的input输入框 html <div class="emails"> <input type="text" class="email" placeholder="请输入手机号/用...
jq 验证邮箱的正确性，并实现点击获取邮箱验证码按钮，出现倒计时，倒计时完成后出现重新获取
weixin_37933545的博客
08-20 1317
html 代码 iq 代码 $("#LAY-user-getemailcode").click(function(){ var email = $("#LAY-user-login-cellemail").val(); if(email == ''){ return layer.msg('邮箱不能为空'); } ...
2020-10-20 jQ写的电影排行榜
weixin_42974569的博客
10-20 767
jq写的电影排行榜，支持鼠标划入弹出内容 献上图片 js代码 <script> $(function(){ $("li").hover(function(){ $(this).addClass("current"); },function(){ $(this).removeClass("current"); }) }) </script>
jQuery验证邮箱(正则)
戴林峰的博客
07-24 8999
var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(!myreg.test(email)){ alert1("请输入正确邮箱地址"); correctpass = false; } 废话不多说 直接贴代码 ...
jquery验证手机号是否正确实例讲解
热门推荐
joeone_strong的博客
04-15 1万+
这篇文章主要介绍了一个jquery验证手机号是否正确的实践案例，利用正则表达式进行验证，感兴趣的小伙伴们可以参考一下 如果要做手机号的验证，那么我们需要知道手机号码的号段。 //移动号码归属地支持号段:134 135 136 137 138 139 147 150 151 152 157 158 159 178  182 183 184 187 188 //联通号码归
使用jquery在前台页面验证邮箱输入是否正确
干勾鱼的CSDN博客
12-27 9006
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/53893591 本文出自【我是干勾鱼的博客】 使用jquery在前台页面验证邮箱输入是否正确，代码如下：<!DOCTYPE html> <html> <head><script type="text/javascript" src="http://code.jquery.com
HTML的文档类型与字符集＜!DOCTYPE html＞
最新发布
m0_65696193的博客
07-15 208
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">我们使用的是 html 5 的版本。
jQuery实现输入邮箱地址自动提示
05-24
可以使用jQuery UI中的Autocomplete插件来实现输入邮箱地址自动提示。 以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Input email autocomplete</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { var availableEmails = [ "example@gmail.com", "example@yahoo.com", "example@hotmail.com", "example@outlook.com", "example@aol.com", "example@icloud.com" ]; $("#email").autocomplete({ source: availableEmails }); }); </script> </head> <body> <label for="email">Email:</label> <input id="email" type="text"> </body> </html> ``` 在上述代码中，我们首先引入了jQuery和jQuery UI库，然后定义了一个可用的邮箱地址列表，最后使用Autocomplete插件将其绑定到输入框上。当用户在输入框中输入文本时，Autocomplete插件将自动显示匹配的邮箱地址，用户可以选择其中之一或继续输入。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值