使用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中都有文本...它們不包含任何交互元素，因此鍵盤在這里沒有相關性。 也許您需要闡述您的問題？