键盘上下键控制下拉列表上下切换

最新推荐文章于 2023-07-10 13:02:58 发布

xmy_wh

最新推荐文章于 2023-07-10 13:02:58 发布

阅读量3.3k

点赞数 2

文章标签： javascript html

本文链接：https://blog.csdn.net/xmy_wh/article/details/76841382

版权

像这样如何使用键盘上下键使光标切换到下拉列表，并上下切换下拉列表？？？？

栗子：

看代码吧




  
   
   
  上下键切换下拉值

<script type="text/javascript" src="jquery.2.js"></script>


   
     

    
    

     
      

    
    

    
      

    
      

     
     包含XXX的消息
包含xXx的广播
包含xXx的人
包含xXx的社团
包含XXX的新闻
包含xXx的广
包含xXx的人们
包含xXx的

    
      

    
      

   
   



<script type="text/javascript">
function moveSelect(step) {
    var listItems=$('#search_show li');
    //当前hover的步数
    var active;
    active =  $('.one').index();
    listItems.eq(active).removeClass("one");
    listItems.eq(active).css("color","#a8a8a8");
    active += step;
    if (active < 0) {
        active = listItems.size() - 1;
    } else if (active >= listItems.size()) {
        active = 0;
    }
    var activeItem = listItems.eq(active).addClass("one");
    listItems.eq(active).css("color","#fff");
    // 切换到哪个下拉值，搜索框里就显示其内容
    $("#search_text").val(listItems.eq(active).text());
};
$(function(){
	$("#search_text").keydown(function(event){  
	    var keycode = (event.keyCode ? event.keyCode : event.which);  
	    if(keycode == 38){  //up
	      moveSelect(-1);
	    }  
	    else if (event.keyCode == 40){//down
	        moveSelect(1);
	    }
	}); 
	$("#search_text").focus(function(){
		console.log('列表出来')
	    $("#search_show").css("display","block");
	});
	$("#search_text").blur(function(){
		console.log('列表关闭')
	    $("#search_show").css("display","none");
	});
	// 当鼠标滑过时
	$("#search_show li").hover(function(){
		$(this).addClass("one");
		$(this).siblings().removeClass("one");
		$(this).siblings().css("color","#a8a8a8");
		// 鼠标划过时，搜索框显示其值
		var listItems=$('#search_show li');
		var active;
        active =  $('.one').index();
		$("#search_text").val(listItems.eq(active).text());
    });
});
</script>