Javascript：使用键盘浏览DIV列表_Javascript

Javascript：使用键盘浏览DIV列表

javascript

Javascript：使用键盘浏览DIV列表,javascript,Javascript,我想有一个DIV列表，用户可以通过按上/下光标键导航，并在更改当前DIV时获取事件，就像在Google Instant results中发生的那样。您知道是否有jQuery/JS组件可以实现它，或者对要使用的组件有什么建议吗谢谢有人写道： <script type="text/javascript"> function fnSelect(objId) { fnDeSelect(); if (document.selection) {

我想有一个DIV列表，用户可以通过按上/下光标键导航，并在更改当前DIV时获取事件，就像在Google Instant results中发生的那样。您知道是否有jQuery/JS组件可以实现它，或者对要使用的组件有什么建议吗

谢谢

有人写道：

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

似乎有效。稍后我将查看它以了解如何进行编辑。

我将其更改为使用鼠标悬停突出显示div，并在单击和箭头键时设置输入内容。我认为这更像谷歌，这正是你想要的

结束编辑

这是我为你写的。我希望您能够使用它：修改css以使其成为您想要的样式应该很容易。如果输入字段有焦点，它会高亮显示div onclick并检测上下箭头键。它在一个名为selectedDiv的变量中跟踪selectedDiv的索引，以便您可以根据需要使用它。它应该完全跨浏览器，至少可以追溯到IE 5.5和所有其他主要浏览器

HTML:

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

请澄清一下。什么是部门名单？你的意思是跳水中的一张单子？您可以使用onchange和onkeypressed属性来实现类似于您正在谈论的内容，无论您正在谈论什么。我指的是一个DIV列表，一个接一个。123。。。我希望能够选择一个，然后按向下箭头键选择以下内容。你是说选择它的内容吗？对不起，我的意思是突出显示内容你是说自定义下拉列表，是的，只需搜索它即可找到你想要的内容。搜索jQuery Auto Complete可能会得到更好的结果。其中之一those@user828584我想我现在得到了他想要的方式：非常感谢，但我想避免使用输入框，不使用输入文本就可以获得onkeyDown吗？@PaulPRO非常感谢，太棒了！我希望尽快达到15分，接受你的解决方案！再次感谢：-@Mike谢谢哈哈，我投票通过了你的问题让你更接近：

#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;
}

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