仿新浪微博登陆邮箱提示效果的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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
Vue路由权限控制解析
Nov 09 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
vmware linux系统安装最新的php7图解
2019/04/14 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python ftp上传文件
2016/02/13 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Django 路由系统URLconf的使用
2018/10/11 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python中有帮助函数吗
2020/06/19 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
大学生自我鉴定
2013/12/08 职场文书
初一地理教学反思
2014/01/16 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
经典婚礼主持词
2014/03/13 职场文书
会计学毕业生求职信
2014/06/25 职场文书
法院授权委托书格式
2014/09/28 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
普宁寺导游词
2015/02/04 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL