仿新浪微博登陆邮箱提示效果的js代码


Posted in Javascript onAugust 02, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="http://s.juzheke.com/min/f=@public/js/jquery.v1.7.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$.fn.extend({ 
"changeTips":function(value){ 
value = $.extend({ 
divTip:"" 
},value) var $this = $(this); 
var indexLi = 0; 
//点击document隐藏下拉层 
$(document).click(function(event){ 
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){ 
var liVal = $(event.target).text(); 
$this.val(liVal); 
blus(); 
}else{ 
blus(); 
} 
}) 
//隐藏下拉层 
function blus(){ 
$(value.divTip).hide(); 
} 
//键盘上下执行的函数 
function keychang(up){ 
if(up == "up"){ 
if(indexLi == 1){ 
indexLi = $(value.divTip).children().length-1; 
}else{ 
indexLi--; 
} 
}else{ 
if(indexLi == $(value.divTip).children().length-1){ 
indexLi = 1; 
}else{ 
indexLi++; 
} 
} 
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass(); 
} 
//值发生改变时 
function valChange(){ 
var tex = $this.val();//输入框的值 
var fronts = "";//存放含有“@”之前的字符串 
var af = /@/; 
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法,是不能用变量的。所以这里用的是new方式。 

//让提示层显示,并对里面的LI遍历 
if($this.val()==""){ 
blus(); 
}else{ 
$(value.divTip). 
show(). 
children(). 
each(function(index) { 
var valAttr = $(this).attr("email"); 
if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();} 
//索引值大于1的LI元素进处处理 
if(index>1){ 
//当输入的值有“@”的时候 
if(af.test(tex)){ 
//如果含有“@”就截取输入框这个符号之前的字符串 
fronts = tex.substring(tex.indexOf("@"),0); 
$(this).text(fronts+valAttr); 
//判断输入的值“@”之后的值,是否含有和LI的email属性 
if(regMail.test($(this).attr("email"))){ 
$(this).show(); 
}else{ 
if(index>1){ 
$(this).hide(); 
} 
} 
} 
//当输入的值没有“@”的时候 
else{ 
$(this).text(tex+valAttr); 
} 
} 
}) 
} 
} 

//输入框值发生改变的时候执行函数,这里的事件用判断处理浏览器兼容性; 
if($.browser.msie){ 
$(this).bind("propertychange",function(){ 
valChange(); 
}) 
}else{ 
$(this).bind("input",function(){ 
valChange(); 
}) 
} 

//鼠标点击和悬停LI 
$(value.divTip).children(). 
hover(function(){ 
indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值; 
if($(this).index()!=0){ 
$(this).addClass("active").siblings().removeClass(); 
} 
}) 

//按键盘的上下移动LI的背景色 
$this.keydown(function(event){ 
if(event.which == 38){//向上 
keychang("up") 
}else if(event.which == 40){//向下 
keychang() 
}else if(event.which == 13){ //回车 
var liVal = $(value.divTip).children().eq(indexLi).text(); 
$this.val(liVal); 
blus(); 
} 
}) 
} 
}) 

$("#loginName").changeTips({ 
divTip:".on_changes" 
}); 
}) 
</script> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.login{width:400px; margin:0 auto; background:#EBEBEB; position:relative;} 
input{ width:230px; height:28px; margin:10px 0; line-height:28px;} 
.login .on_changes{width:232px; position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid #000; display:none; padding:10px;} 
.login .on_changes li{margin:8px;padding:4px;} 
.login .on_changes li.active{ background:#CEE7FF;} 
</style> 
</head> 
<body> 
<div class="login"> 
<div class="ln"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div> 
<ul class="on_changes"> 
<li email="">请选择邮箱类型</li> 
<li email=""></li> 
<li email="@sina.com"></li> 
<li email="@163.com"></li> 
<li email="@qq.com"></li> 
<li email="@hotmail.com"></li> 
<li email="@126.com"></li> 
<li email="@gmail.com"></li> 
<li email="@yahoo.com"></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
laypage+SpringMVC实现后端分页
Jul 27 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 #Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 #Javascript
js获取location.href的参数实例代码
Aug 02 #Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 #Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 #Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 #Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 #Javascript
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
JavaScript实现区块链
2018/03/14 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python中除法使用的注意事项
2014/08/21 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
有关Python的22个编程技巧
2018/08/29 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Pytorch之Variable的用法
2019/12/31 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
职称自我鉴定
2013/10/15 职场文书
实习生自荐信范文
2013/11/13 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
司机职责范本
2014/03/08 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书