Javascript: navigating through a list of DIV with the keyboard - Stack Overflow

admin管理员组

文章数量:1384613

i would like to have a DIV list on which the user can navigate by pressing up/down cursor keys and getting event when he changes the current DIV, as it happens in Google Instant results. Do you know if there is a jQuery/JS ponent to achieve it or any suggestions on the ponents to use.

Thanks !

i would like to have a DIV list on which the user can navigate by pressing up/down cursor keys and getting event when he changes the current DIV, as it happens in Google Instant results. Do you know if there is a jQuery/JS ponent to achieve it or any suggestions on the ponents to use.

Thanks !

• javascript

Share Improve this question Follow asked Jul 27, 2011 at 7:20 MikeMike 53011 gold badge77 silver badges2121 bronze badges 5

• Please clarify a bit. What's a div list? You meant a list inside a dive? You can use the onchange and onkeypressed attributes to achieve something like what you're talking about, whatever you're talking about. – mowwwalker Commented Jul 27, 2011 at 7:23
• I mean a list of DIV, one after the other.<div>1</div><div>2</div><div>3</div>... i would like to be able to select one, then, by pressing the down arrow key, to select the following. – Mike Commented Jul 27, 2011 at 7:26
• Do you mean select it's content? – mowwwalker Commented Jul 27, 2011 at 7:27
• sorry, i was meaning highlight the content – Mike Commented Jul 27, 2011 at 7:29
• You mean custom drop down list and yes, just Google it to find what you want. You might also get even better results searching for "jQuery Auto Complete". (demo of one of those) – user447356 Commented Jul 27, 2011 at 8:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Edit

I changed it to use mouseover for highlighting the divs and setting the content of the input on click and the arrow keys. I think this is more similar to Google's which is what you wanted.

End Edit

I just wrote this for you. I hope you're able to use it: http://jsfiddle/Paulpro/evBkC/8/ It should be easy to modify the css to style it the way you want from there. It highlights a div onclick and detects the up and down arrow keys if the input field has focus. It keeps track of the selectedDiv's index in a variable called selectedDiv so you can use it if you want. It should be fully cross-browser as far back as IE 5.5 at least and all the other major browsers.

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();

Someone wrote this:

<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>

Seems to work. I'll take a look at it later to see how.

本文标签： Javascript navigating through a list of DIV with the keyboardStack Overflow