jQuery 实现自动填充邮箱功能（带下拉提示）(3)
③按键为方向键↑(38) if(event.keyCode == 38){ //使光标始终在输入框文字右边 $(this).val($(this).val()); }//方向键↑结束 ④按键为回车键(13) if(event.keyCode == 13){ if(
③按键为方向键↑(38)
if(event.keyCode == 38){
//使光标始终在输入框文字右边
$(this).val($(this).val());
}//方向键↑结束
④按键为回车键(13)
if(event.keyCode == 13){
if($("ul.autoul li").is(".lihover")) {
$("#uemail").val($("ul.autoul li.lihover").children(".ex").text() + "@" + $("ul.autoul li.lihover").children(".step").text());
}
$(".autoul").children().hide();
$(".autoul").children().removeClass("lihover");
$("#uemail").focus();//回车后输入栏获得焦点
}
至此keyup事件结束。
#("#uemail")的keydown事件
$("#uemail").keydown(function(){
if(event.keyCode == 40){
//按键为↓时....
}
if(event.keyCode == 38){
//按键为↑时....
}
})
⑤按键为方向键 ↓ (40)
if(event.keyCode == 40){
//当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li
if ($("ul.autoul li").is(".lihover")) {
//如果还存在下一条(可见的)li的话
if ($("ul.autoul li.lihover").nextAll().is("li:visible")) {
if ($("ul.autoul li.lihover").nextAll().hasClass("showli")) {
$("ul.autoul li.lihover").removeClass("lihover")
.nextAll(".showli:eq(0)").addClass("lihover");
} else {
$("ul.autoul li.lihover").removeClass("lihover").removeClass("showli")
.next("li:visible").addClass("lihover");
$("ul.autoul").children().show();
}
} else {
$("ul.autoul li.lihover").removeClass("lihover");
$("ul.autoul li:visible:eq(0)").addClass("lihover");
}
}
}
⑥按键为方向键 ↑ (38)
if(event.keyCode == 38){
//当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li
if($("ul.autoul li").is(".lihover")){
//如果还存在上一条(可见的)li的话
if($("ul.autoul li.lihover").prevAll().is("li:visible")){
if($("ul.autoul li.lihover").prevAll().hasClass("showli")){
$("ul.autoul li.lihover").removeClass("lihover")
.prevAll(".showli:eq(0)").addClass("lihover");
}else{
$("ul.autoul li.lihover").removeClass("lihover").removeClass("showli")
.prev("li:visible").addClass("lihover");
$("ul.autoul").children().show();
}
}else{
$("ul.autoul li.lihover").removeClass("lihover");
$("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover");
}
}else{
//当键盘按下↓时,如果之前没有一条li被选中的话,则第一条(可见的)li被选中
$("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover");
}
}
至此keydown事件结束。
⑦当鼠标点击下拉菜单的具体一条内容时
$(".autoli").click(function(){
$("#uemail").val($(this).children(".ex").text()+$(this).children(".at").text()+$(this).children(".step").text());
$(".autoul").hide();
});
//鼠标点击下拉菜单具体内容事件结束
⑧当鼠标点击document时,下拉隐藏
$("body").click(function(){
$(".autoul").hide();
});
//鼠标点击document事件结束
⑨鼠标划过li时
$("ul.autoul li").hover(function(){
if($("ul.autoul li").hasClass("lihover")){
$("ul.autoul li").removeClass("lihover");
}
$(this).addClass("lihover");
});
至此，功能完成。
精彩图集
精彩文章