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的箭頭鍵導航

回答

相關問題