jQuery 实现自动填充邮箱功能（带下拉提示）(3)

时间:2014-10-19 15:04来源:网络整理作者:网络点击: 次

分享到：

③按键为方向键↑(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");
  });

至此，功能完成。