仿新浪微博登陆邮箱提示效果的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刷新框架外页面七种实现代码
Feb 18 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
php下保存远程图片到本地的办法
2010/08/08 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python实现的Excel文件读写类
2015/07/30 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
tensorflow更改变量的值实例
2018/07/30 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
幼师辞职信范文
2015/02/27 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL