使用 javascript 使用向上和向下箭头键访问 Div 内容答案

【问题标题】：Access Div Contents using Up and Down Arrow Keys using javascript使用 javascript 使用向上和向下箭头键访问 Div 内容
【发布时间】：2010-09-28 23:34:53
【问题描述】：

我有一个包含 4 个子 Div 标签的 Div 标签


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

现在我想通过 Javascript 使用向上和向下箭头键访问这些子 Div 上面的 div 在单击 TextBox 时显示。我希望用户可以选择任何子 div，并且其选定的值出现在 TextBox 中。我通过将 onClick 事件附加到每个 childDiv 来实现最终结果。

【问题讨论】：

标签： javascript html keyboard

【解决方案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>

【讨论】：

【解决方案2】：

您是否正在寻找所谓的auto-completion 或建议？

【讨论】：

是的，但是我不能使用 AjaxControlToolKit 或任何第三方 Dll，所以我使用 XMLHttpRequest 来生成这个 div。有什么帮助吗？？
JQuery 不是第三方DLL，它是纯javascript，如果你使用javascript，你绝对可以在你的项目中使用它。检查我上面的答案。

【解决方案3】：

您肯定在寻找“自动建议/自动完成”如果您想在纯 javascript 中完全实现，这是相当耗时的，但是是的，您可以使用 strager 中的示例开始。

我建议改用JQuery。 JQuery 有一个非常好的plugin for autocomplete，您可以使用它。几天前我刚刚在我的一个项目中实施，它似乎工作正常。

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

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

干杯！

【讨论】：

【解决方案4】：

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

【讨论】：