使用javascript使用上下箭头键访问Div内容

我有一个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>

ChildOne</div>
儿童二号</div>
儿童三号</div>
ChildFour</div>
</Div>

现在我想通过Javascript使用上下箭头键访问这些子Div

---

上面的div是在单击文本框时显示的。我希望用户可以选择任何子div，其选定值显示在文本框中。通过将onClick事件附加到每个childDiv，我已经实现了最终结果。

你说的“用箭头键访问它们”是什么意思？每个div中都有文本。。。它们不包含任何交互元素，所以键盘在这里没有相关性。也许你需要详细说明你的问题？

你说的“用箭头键访问它们”是什么意思？每个div中都有文本。。。它们不包含任何交互元素，所以键盘在这里没有相关性。也许你需要详细说明你的问题？

你在寻找什么是已知的或建议吗？

你在寻找什么是已知的或建议吗？

你肯定在寻找“Autosuggest/Autocomplete”，如果你想在纯javascript中实现它，这是相当耗时的，您可以使用strager的示例开始

我的建议是使用。JQuery有一个非常好的工具，您可以使用它。几天前，我刚刚在我的一个项目中实施了它，它似乎工作得很好

在制作软件时，你必须记住一句重要的话——“不要试图重新发明轮子。”

如果其他程序员已经这样做了，并且他们乐于分享、使用并感谢他们

---

干杯

您肯定在寻找“Autosuggest/Autocomplete”，如果您想在纯javascript中实现它，那么完全实现它相当耗时，但是是的，您可以使用strager的示例开始

我的建议是使用。JQuery有一个非常好的工具，您可以使用它。几天前，我刚刚在我的一个项目中实施了它，它似乎工作得很好

在制作软件时，你必须记住一句重要的话——“不要试图重新发明轮子。”

如果其他程序员已经这样做了，并且他们乐于分享、使用并感谢他们

---

干杯

这里有一个无库解决方案，让您开始使用

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

div.active{background:red}
ChildOne
孩子二
孩子三
孩子四
函数自动完成（textBoxId、containerDivId）{
var ac=这个；
this.textbox=document.getElementById（textBoxId）；
this.div=document.getElementById（containerDivId）；
this.list=this.div.getElementsByTagName（'div'）；
this.pointer=null；
this.textbox.onkeydown=函数（e）{
e=e | | window.event；
开关（如钥匙代码）{
案例38://以上
ac.selectDiv（-1）；
打破
案例40://向下
ac.selectDiv（1）；
打破
}
}
this.selectDiv=函数（inc）{
if（this.pointer！==null&&this.pointer+inc>=0&&this.pointer+inc

这是一个免费的库解决方案，让您开始学习

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

div.active{background:red}
ChildOne
孩子二
孩子三
孩子四
函数自动完成（textBoxId、containerDivId）{
var ac=这个；
this.textbox=document.getElementById（textBoxId）；
this.div=document.getElementById（containerDivId）；
this.list=this.div.getElementsByTagName（'div'）；
this.pointer=null；
this.textbox.onkeydown=函数（e）{
e=e | | window.event；
开关（如钥匙代码）{
案例38://以上
ac.selectDiv（-1）；
打破
案例40://向下
ac.selectDiv（1）；
打破
}
}
this.selectDiv=函数（inc）{
if（this.pointer！==null&&this.pointer+inc>=0&&this.pointer+inc

是的，但我不能使用AjaxControlToolKit或任何第三方Dll，因此我使用XMLHttpRequest生成此div。任何帮助？？JQuery不是第三方Dll，它是纯javascript，如果您使用javascript，您肯定可以在项目中使用它。检查我上面的答案。是的，但我不能使用AjaxControlToolKit或任何第三方Dll，所以我使用XMLHttpRequest生成这个div。任何帮助？？JQuery不是第三方Dll，它是纯javascript，如果您使用javascript，您肯定可以在您的项目中使用它。检查我上面的答案。

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