仿新浪微博登陆邮箱提示效果的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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
js取得url地址参数实例
2013/02/22 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python接入支付宝的实例操作
2020/07/20 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
《识字五》教学反思
2014/03/01 职场文书
情人节寄语大全
2014/04/11 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
会计个人实习计划书
2014/08/15 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
计算机实训报告总结
2014/11/05 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS