使用javascript使用上下箭头键访问Div目录

Question

我有一个Div标签，其中包含4个子Div标签

   <Div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
  </Div>

现在我想通过Java脚本使用上下箭头键访问这些子Div上面的div是在单击TextBox时显示的。我希望用户可以选择任何一个子div，并且其选定的值将出现在TextBox中。 我已经通过对每个childDiv附加了onClick事件来获得最终结果。

Answer 1

这是一个免费的图书馆解决方案，可以帮助您入门。

您可能想添加在文本框获得焦点或失去焦点时隐藏和显示div的事件。 也许[esc]应该清除选择？ （我还没有在ie中测试过）

<style>div.active{ background: red }</style>

<input type="text" id="tb">

<div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
</div>
<script type="text/javascript">


function autocomplete( textBoxId, containerDivId ) {
    var ac = this;
    this.textbox     = document.getElementById(textBoxId);
    this.div         = document.getElementById(containerDivId);
    this.list        = this.div.getElementsByTagName('div');
    this.pointer     = null;

    this.textbox.onkeydown = function( e ) {
        e = e || window.event;
        switch( e.keyCode ) {
            case 38: //up
                ac.selectDiv(-1);
                break;
            case 40: //down
                ac.selectDiv(1);
                break;
        }
    }

    this.selectDiv = function( inc ) {
        if( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) {
            this.list[this.pointer].className = '';
            this.pointer += inc;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
        if( this.pointer === null ) {
            this.pointer = 0;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
    }
} 

new autocomplete( 'tb', 'Parent' );
</script>

Answer 2

您是否在寻找所谓的自动完成或建议？

Answer 3

您肯定在寻找“ Autosuggest / Autocomplete”，如果要使用纯JavaScript来完全实现，这是相当耗时的，但是可以，您可以使用strager的示例开始。

我建议改用JQuery 。 JQuery有一个非常不错的插件，可用于自动完成 。 几天前，我刚刚在我的一个项目中实施了该程序，它似乎运行良好。

有句重要的谚语，在制作软件时必须记住：“不要试图重新发明轮子。”

如果其他程序员已经做到了，他们也很乐意分享，使用它，并感谢他们。

干杯!

Answer 4

您是什么意思“使用箭头键访问它们”？ 每个div中都有文本...它们不包含任何交互元素，因此键盘在这里没有相关性。 也许您需要阐述您的问题？