PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    如何利用JS实现键盘控制下拉列表的滚动?

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:昨晚自己倒腾的。估计这种代码只有自己看得懂了。第一篇博文,纪念一下。代码插入这个还是比较方便的~~复制代码 代码如下:var keyHandler...
    昨晚自己倒腾的。估计这种代码只有自己看得懂了。第一篇博文,纪念一下。

    代码插入这个还是比较方便的~~
     

     
    复制代码 代码如下:
    var keyHandler=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        var hoverCSS={
          color: '#FFF',
          'background-color': '#6E9DE4'
        };
        var backCSS={
          color:'#000',
          'background-color':'#fff'
        };
        if(e && e.keyCode==37){ // 按 左
          cu_pos--;
    $("#hh_"+dest).find('li').eq(cu_pos+1).find('a').css(backCSS);
           if(cu_pos<0){
            cu_pos=$("#hh_"+dest).find('li').length-1;
          }
          $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
           $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS);
        }
        if(e && e.keyCode==38){ // 按 上
          //要做的事情
                   
          cu_pos--;
        //  console.log("Pressed 上"+cu_pos);
                   
          $("#hh_"+dest).find('li').eq(cu_pos+1).find('a').css(backCSS);
           if(cu_pos<0){
            cu_pos=$("#hh_"+dest).find('li').length-1;
          }
           $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
           $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS);
                  
        }
        if(e && e.keyCode==39){ // enter 右
          cu_pos++;
             // if(cu_pos>=0){
              $("#hh_"+dest).find('li').eq(cu_pos-1).find('a').css(backCSS);
              //$("#hh_"+dest).css("marginTop","-=12px");
                     
            //  }
              if(cu_pos>=$("#hh_"+dest).find('li').length){
                cu_pos=0;
              }
               $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
                       
            $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS);
                     
        }
        if(e && e.keyCode==40){ // enter 下
               cu_pos++;
        //  console.log("Pressed 下"+cu_pos);
           // console.log(cu_pos);
       //   console.log($("#hh_"+dest).find('li').length);
                     
             // if(cu_pos>0){
              $("#hh_"+dest).find('li').eq(cu_pos-1).find('a').css(backCSS);
            //  $("#hh_"+dest).css("marginTop","+=12px");
                    
           //   }
          if(cu_pos>=$("#hh_"+dest).find('li').length){
                cu_pos=0;
              }
               $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
            $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS);
                     
                 
        }
        if(e && e.keyCode==13){ // enter Enter
       // console.log("Pressed Enter");
       // console.log($("#hh_"+dest).find('li').eq(cu_pos).find('a').html());
        gets_id('class_'+dest).value=$("#hh_"+dest).find('li').eq(cu_pos).find('a').html();
        $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(backCSS);
        gets_id('hh_'+dest).style.display='none';
         document.removeEventListener("mousedown", handler, false);
               document.removeEventListener("keydown", keyHandler, false);
        }
    };
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-599-1.html
    相关热词搜索: JavaScript 下拉列表