仿新浪微博登陆邮箱提示效果的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 相关文章推荐
JQuery循环滚动图片代码
Dec 08 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
JS变量及其作用域
Mar 29 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
node事件循环和process模块实例分析
Feb 14 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python3多线程知识点总结
2019/09/26 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
京剧自荐信
2014/01/26 职场文书
安全生产先进个人材料
2014/02/06 职场文书
项目建议书模板
2014/05/12 职场文书
2014年店长工作总结
2014/11/17 职场文书
立项申请报告范本
2015/05/15 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
python APScheduler执行定时任务介绍
2022/04/19 Python