 
<!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>無(wú)標(biāo)題文檔</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; 

//點(diǎn)擊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(); 
} 

//鍵盤上下執(zhí)行的函數(shù) 
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(); 
} 

//值發(fā)生改變時(shí) 
function valChange(){ 
var tex = $this.val();//輸入框的值 
var fronts = "";//存放含有“@”之前的字符串 
var af = /@/; 
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正則字面量方法，是不能用變量的。所以這里用的是new方式。 


//讓提示層顯示，并對(duì)里面的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元素進(jìn)處處理 
if(index>1){ 
//當(dāng)輸入的值有“@”的時(shí)候 
if(af.test(tex)){ 
//如果含有“@”就截取輸入框這個(gè)符號(hào)之前的字符串 
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(); 
} 
} 

} 
//當(dāng)輸入的值沒有“@”的時(shí)候 
else{ 
$(this).text(tex+valAttr); 
} 
} 
}) 
} 
} 


//輸入框值發(fā)生改變的時(shí)候執(zhí)行函數(shù)，這里的事件用判斷處理瀏覽器兼容性; 
if($.browser.msie){ 
$(this).bind("propertychange",function(){ 
valChange(); 
}) 
}else{ 
$(this).bind("input",function(){ 
valChange(); 
}) 
} 


//鼠標(biāo)點(diǎn)擊和懸停LI 
$(value.divTip).children(). 
hover(function(){ 
indexLi = $(this).index();//獲取當(dāng)前鼠標(biāo)懸停時(shí)的LI索引值; 
if($(this).index()!=0){ 
$(this).addClass("active").siblings().removeClass(); 
} 
}) 


//按鍵盤的上下移動(dòng)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="郵箱/會(huì)員帳號(hào)/手機(jī)號(hào)" /></div> 
<ul class="on_changes"> 
<li email="">請(qǐng)選擇郵箱類型</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> 