1

4 つの子 Div タグを含む 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>

ここで、Javascript を介して上矢印キーと下矢印キーを使用してこれらの子 Div にアクセスしたいと思います。上記の div は、TextBox をクリックすると表示されます。各childDivにonClickイベントを添付することで、最終結果を達成しました。

4

4 に答える 4

5

これは、開始するためのライブラリ無料のソリューションです。

テキストボックスがフォーカスを獲得または失ったときに div を非表示および表示するイベントを追加したい場合があります。おそらく [esc] で選択をクリアする必要がありますか? （つまり、テストしていません）

<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>
于 2008-12-31T10:09:00.957 に答える
1

オートコンプリートまたは提案と呼ばれるものをお探しですか?

于 2008-12-31T07:16:58.573 に答える
0

あなたは間違いなく「Autosuggest/Autocomplete」を探しています。純粋な JavaScript で実行したい場合、これを完全に実装するにはかなり時間がかかりますが、はい、strager の例を使用して開始できます。

代わりにJQueryを使用することをお勧めします。JQuery には、使用できるオートコンプリート用の非常に優れたプラグインがあります。数日前に自分のプロジェクトの 1 つに実装したところ、問題なく動作しているようです。

ソフトウェアを作成する際に覚えておかなければならない重要なことわざがあります。「車輪の再発明を試みるな」です。

他のプログラマーがすでにそれを行っていて、彼らが親切にも共有し、使用し、感謝している場合.

乾杯！

于 2008-12-31T07:37:30.857 に答える
-1

「矢印キーでアクセスする」とはどういう意味ですか? 各 div にはテキストがあります...それらにはインタラクション要素が含まれていないため、キーボードはここでは関係ありません。多分あなたはあなたの質問を詳しく説明する必要がありますか？

于 2008-12-31T07:08:59.370 に答える