Javascript：使用鍵盤瀏覽DIV列表

我想要一個DIV列表，用戶可以通過按上/下光標鍵並在他更改當前DIV時獲取事件來進行導航，就像在Google中發生的那樣即時結果。你知道是否有一個jQuery/JS組件來實現它或任何有關組件的使用建議。Javascript：使用鍵盤瀏覽DIV列表

謝謝！

來源

2011-07-27 Mike

請澄清一下。什麼是div列表？你的意思是在一個潛水內的名單？無論您在談論什麼，您都可以使用onchange和onkeypressed屬性來實現您所談論的內容。 – mowwwalker

我的意思是一個接一個的DIV列表。

...我希望能夠選擇一個，然後按向下箭頭鍵選擇以下內容。 – Mike

你的意思是選擇它的內容？ – mowwwalker

編輯

我改成了使用鼠標懸停突出的div並設定輸入的點擊次數和方向鍵的內容。我認爲這與Google的更類似，就是你想要的。

末編輯

我只是寫了這個給你。我希望你能夠使用它：http://jsfiddle.net/Paulpro/evBkC/8/ 應該很容易修改CSS來按照你想要的方式來設置它。它突出顯示一個div點擊並在輸入字段具有焦點時檢測向上和向下箭頭鍵。它會跟蹤名爲selectedDiv的變量的selectedDiv索引，以便您可以使用它。它至少應該是IE 5.5以及其他所有主流瀏覽器的完全跨瀏覽器。

HTML：

<div id="nav"> 
    <input type="text" /> 
    <div>Line 1</div> 
    <div>Line 2</div> 
    <div>Line 3</div> 
    <div>Line 4</div> 
    <div>Line 5</div> 
    <div>Line 6</div> 
</div>

CSS：

#nav, #nav input{ 
    width: 300px; 
} 

#nav div{ 
    width: 150px;  
    margin-left: 75px; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
    cursor: pointer; 
}

的Javascript：

var divs = document.getElementById('nav').getElementsByTagName('div'), 
selectedDiv = 0, 
i; 

for(i = 0; i < divs.length; i++){ 
    divs[i].onmouseover = (function(i){ 
     return function(){ 
      divs[selectedDiv].style.backgroundColor = ''; 
      selectedDiv = i; 
      divs[selectedDiv].style.backgroundColor = '#68F'; 
     } 
    })(i); 

    divs[i].onclick = function(){ 
     document.getElementById('nav'). 
      getElementsByTagName('input')[0].focus(); 
     document.getElementById('nav'). 
      getElementsByTagName('input')[0].value = 
      (this.innerText || this.textContent); 
    }; 
} 

divs[selectedDiv].style.backgroundColor = '#68F'; 

document.getElementById('nav'). 
    getElementsByTagName('input')[0].onkeydown = function(e){ 
    var x = 0; 
    if(e.keyCode == 38) 
     x = -1; 
    else if(e.keyCode == 40) 
     x = 1; 
    else 
     return; 
    divs[selectedDiv].style.backgroundColor = ''; 
    selectedDiv = ((selectedDiv+x)%divs.length); 
    selectedDiv = selectedDiv < 0 ? 
     divs.length+selectedDiv : selectedDiv; 
    document.getElementById('nav'). 
     getElementsByTagName('input')[0].value = 
     (divs[selectedDiv].innerText || divs[selectedDiv].textContent); 
    divs[selectedDiv].style.backgroundColor = '#68F'; 
}; 

document.getElementById('nav'). 
    getElementsByTagName('input')[0].focus();

來源

2011-07-27 07:45:40 Paulpro

http://jsfiddle.net/uEBSV/ 我想他是說他想要選擇文本。 – mowwwalker

@ user828584我認爲我現在有這樣的方式：http://jsfiddle.net/Paulpro/evBkC/8/ – Paulpro

非常感謝，但我想避免使用輸入框，是否有可能獲取onkeyDown而不使用inlut文本？ – Mike

有人寫這樣的：

<script type="text/javascript"> 
    function fnSelect(objId) { 
     fnDeSelect(); 
     if (document.selection) { 
     var range = document.body.createTextRange(); 
      range.moveToElementText(document.getElementById(objId)); 
     range.select(); 
     } 
     else if (window.getSelection) { 
     var range = document.createRange(); 
     range.selectNode(document.getElementById(objId)); 
     window.getSelection().addRange(range); 
     } 
    } 


    function fnDeSelect() { 
     if (document.selection) document.selection.empty(); 
     else if (window.getSelection) 
       window.getSelection().removeAllRanges(); 
    } 
    </script> 
<body> 

<div id="test1"> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
</div> 
<div id="test2"> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
    <p>jhsdgfhlsdlfkjsdklgjs</p> 
</div> 
<a href="javascript:fnSelect('test1');">Select 1</a> 
<a href="javascript:fnSelect('test2');">Select 2</a> 
<a href="javascript:fnDeSelect();">DeSelect</a> 
</body>

似乎工作。稍後我會看看它如何。

來源

2011-07-27 07:45:02 mowwwalker

Javascript：使用鍵盤瀏覽DIV列表

回答

相關問題