<div class="codetitle"> <span><a style="CURSOR: pointer" data="70252" class="copybut" id="copybut70252" onclick="doCopy('code70252')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code70252"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>无标题文档</title> <br><script type="text/javascript" src="http://s.juzheke.com/min/f=@public/js/jquery.v1.7.js"></script> <br><script type="text/javascript"> <br>$(function(){ <br>$.fn.extend({ <br>"changeTips":function(value){ <br>value = $.extend({ <br>divTip:"" <br>},value) <br><br>var $this = $(this); <br>var indexLi = 0; <br><br>//点击document隐藏下拉层 <br>$(document).click(function(event){ <br>if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){ <br>var liVal = $(event.target).text(); <br>$this.val(liVal); <br>blus(); <br>}else{ <br>blus(); <br>} <br>}) <br><br>//隐藏下拉层 <br>function blus(){ <br>$(value.divTip).hide(); <br>} <br><br>//键盘上下执行的函数 <br>function keychang(up){ <br>if(up == "up"){ <br>if(indexLi == 1){ <br>indexLi = $(value.divTip).children().length-1; <br>}else{ <br>indexLi--; <br>} <br>}else{ <br>if(indexLi == $(value.divTip).children().length-1){ <br>indexLi = 1; <br>}else{ <br>indexLi++; <br>} <br>} <br>$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass(); <br>} <br><br>//值发生改变时 <br>function valChange(){ <br>var tex = $this.val();//输入框的值 <br>var fronts = "";//存放含有“@”之前的字符串 <br>var af = /@/; <br>var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法,是不能用变量的。所以这里用的是new方式。 <br><br><br>//让提示层显示,并对里面的LI遍历 <br>if($this.val()==""){ <br>blus(); <br>}else{ <br>$(value.divTip). <br>show(). <br>children(). <br>each(function(index) { <br>var valAttr = $(this).attr("email"); <br>if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();} <br>//索引值大于1的LI元素进处处理 <br>if(index>1){ <br>//当输入的值有“@”的时候 <br>if(af.test(tex)){ <br>//如果含有“@”就截取输入框这个符号之前的字符串 <br>fronts = tex.substring(tex.indexOf("@"),0); <br>$(this).text(fronts+valAttr); <br>//判断输入的值“@”之后的值,是否含有和LI的email属性 <br>if(regMail.test($(this).attr("email"))){ <br>$(this).show(); <br>}else{ <br>if(index>1){ <br>$(this).hide(); <br>} <br>} <br><br>} <br>//当输入的值没有“@”的时候 <br>else{ <br>$(this).text(tex+valAttr); <br>} <br>} <br>}) <br>} <br>} <br><br><br>//输入框值发生改变的时候执行函数,这里的事件用判断处理浏览器兼容性; <br>if($.browser.msie){ <br>$(this).bind("propertychange",function(){ <br>valChange(); <br>}) <br>}else{ <br>$(this).bind("input",function(){ <br>valChange(); <br>}) <br>} <br><br><br>//鼠标点击和悬停LI <br>$(value.divTip).children(). <br>hover(function(){ <br>indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值; <br>if($(this).index()!=0){ <br>$(this).addClass("active").siblings().removeClass(); <br>} <br>}) <br><br><br>//按键盘的上下移动LI的背景色 <br>$this.keydown(function(event){ <br>if(event.which == 38){//向上 <br>keychang("up") <br>}else if(event.which == 40){//向下 <br>keychang() <br>}else if(event.which == 13){ //回车 <br>var liVal = $(value.divTip).children().eq(indexLi).text(); <br>$this.val(liVal); <br>blus(); <br>} <br>}) <br>} <br>}) <br><br><br>$("#loginName").changeTips({ <br>divTip:".on_changes" <br>}); <br>}) <br></script> <br><style type="text/css"> <br>*{margin:0;padding:0;} <br><br>.login{width:400px; margin:0 auto; background:#EBEBEB; position:relative;} <br><br>input{ width:230px; height:28px; margin:10px 0; line-height:28px;} <br><br>.login .on_changes{width:232px; position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid #000; display:none; padding:10px;} <br><br>.login .on_changes li{margin:8px;padding:4px;} <br><br>.login .on_changes li.active{ background:#CEE7FF;} <br><br></style> <br></head> <br><body> <br><div class="login"> <br><div class="ln"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div> <br><ul class="on_changes"> <br><li email="">请选择邮箱类型</li> <br><li email=""></li> <br><li email="@sina.com"></li> <br><li email="@163.com"></li> <br><li email="@qq.com"></li> <br><li email="@hotmail.com"></li> <br><li email="@126.com"></li> <br><li email="@gmail.com"></li> <br><li email="@yahoo.com"></li> <br></ul> <br></div> <br></body> <br></html> <br> </div>