Javascript: navigating through a list of DIV with the keyboard_问答_开发者

Javascript: navigating through a list of DIV with the keyboard

开发者 https://www.devze.com 2023-03-23 17:48 出处：网络

相关专题：javascript

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 Go开发者_开发问答ogle Instant results. Do you know if there is a jQuery/JS component to achieve it or any suggestions on the components to use.

Thanks !

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.net/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.