jQuery的箭头键导航

我的这些文本框和下拉菜单中的“Facebook的”喜欢自我暗示：jQuery的箭头键导航

<input type="text" id="search" name="search_fld"/> 

<div id="display"> 
<div class="display_box">Luca</div> 
<div class="display_box">David</div> 
<div class="display_box">Mark</div> 
<div class="display_box">...</div> 
</div>

我的CSS

.display_box:hover 
{ 
    background:#3b5998; 
    color:#FFFFFF; 
}

我如何能实现通过了“hover'state与向下箭头键从我的输入“search_fld”到第一个“display_box”等所有“显示”divs？

这里的jsfiddle：http://jsfiddle.net/MKZSE/

感谢卢卡

来源

2011-04-04 luca

不能模仿悬停状态很好..有没有从加入“真正的”类相同风格的转义：

.display_box_hover, .display_box:hover 
{ 
    background:#3b5998; 
    color:#FFFFFF; 
}

下面这段代码将“naviage”的元素：

window.displayBoxIndex = -1; 

$("#search").keyup(function(e) 
{ 
     if (e.keyCode == 40) 
     { 
      Navigate(1); 
     } 
     if(e.keyCode==38) 
     { 
      Navigate(-1); 
     } 

}); 

var Navigate = function(diff) { 
    displayBoxIndex += diff; 
    var oBoxCollection = $(".display_box"); 
    if (displayBoxIndex >= oBoxCollection.length) 
     displayBoxIndex = 0; 
    if (displayBoxIndex < 0) 
     displayBoxIndex = oBoxCollection.length - 1; 
    var cssClass = "display_box_hover"; 
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass); 
}

这将“记住”最后的“选择”元素的索引，并切换到下一个或前一个元素，采用eq()功能和从添加该类以上到所选元素。

Updated jsFiddle。

来源

2011-04-04 12:55:11

如果你这样做了，那么，老实说...这会比我的好多了 – 2011-04-04 12:58:05

'class'是一个保留名字。您必须更改该var名称，否则它将无法工作，至少在jsfiddle上。工作版本：http://jsfiddle.net/supertrue/MKZSE/51/ – supertrue 2012-05-05 17:02:02

@supertrue是正确的，当我写这个的时候它正在回退，可能'class'在稍后的某个点被标记为保留。没有得到你的评论的通知，但迟到比从未好！ :-) – 2012-11-07 07:40:09

您可以使用CSS /使用的覆盖跨度背景箭头图像输入领域，使其使用箭头键为输入域的背景在悬停状态下使用css或js可见

来源

2011-04-04 11:58:05 thecodeparadox

确定它很丑。在小提琴here。

<script src="jquery.js"></script> 

<script> 
$(function(){ 

     $('.display_box').hover(function(){    
      $(this).attr('class', 'display_box current') 
     }, function(){ 
      $(this).attr('class', 'display_box'); 
     }); 

     $('#search').keyup(
      function (e){ 
       var curr = $('#display').find('.current'); 
       if (e.keyCode == 40) 
       {         
        if(curr.length) 
        { 
          $(curr).attr('class', 'display_box'); 
          $(curr).next().attr('class', 'display_box current'); 
        } 
        else{ 
         $('#display div:first-child').attr('class', 'display_box current'); 
        }     
       } 
       if(e.keyCode==38) 
       {          
        if(curr.length) 
        {       
          $(curr).attr('class', 'display_box'); 
          $(curr).prev().attr('class', 'display_box current'); 
        } 
        else{ 
         $('#display div:last-child').attr('class', 'display_box current'); 
        }   
       } 
      }  
     ) 

    }); 
</script> 
<style> 
.current{ 
    background:#3b5998; 
    color:#FFFFFF; 
} 
</style> 

<input type="text" id="search" name="search_fld"/> 
<div id="display"> 
<div class="display_box current">Luca</div> 
<div class="display_box">David</div> 
<div class="display_box">Mark</div> 
<div class="display_box">...</div> 
</div>

来源

2011-04-04 12:47:34

相同原理的我，只是不同实现。 :) – 2011-04-04 12:56:40

为了实现自我暗示文本字段，这将是更好地使用“数据列表”标签如下：

<input list="search" name="search_fld"/> 
    <datalist id="search"> 
    <option value="Luca"/> 
    <option value="David"/> 
    <option value="Mark"/> 
    </datalist>

获取有关数据列表标记的更多细节在这里：http://www.w3schools.com/tags/tag_datalist.asp

来源

2013-06-11 19:17:17 Ankit

jQuery的箭头键导航

回答

相关问题