javascriptを使用して上下矢印キーを使用してDivコンテンツにアクセスする

StackOverflow https://stackoverflow.com/questions/402448

  •  03-07-2019
  •  | 
  •  

質問

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を使用して上下の矢印キーを使用して、これらのChild Divにアクセスします。 上記のdivはTextBoxのクリック時に表示されます。ユーザーが子divのいずれかを選択でき、その選択された値がTextBoxに表示されるようにしたいのです。各childDivへのattachinh onClickイベントによって最終結果を達成しました。

役に立ちましたか？

解決

オートコンプリートまたは提案として知られているものをお探しですか？

他のヒント

使用を開始するためのライブラリのないソリューションです。

テキストボックスがフォーカスを取得または失ったときに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>

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

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

ソフトウェアの作成中に覚えておく必要があるという重要な言葉があります。「車輪を再発明しようとしないでください。」

他のプログラマーがすでにそれを行っており、彼らがそれを共有し、使用し、感謝するのに十分親切な場合。

乾杯！

「矢印キーでアクセス」とはどういう意味ですか？各divにはテキストがあります...これらには相互作用要素が含まれていないため、キーボードはここでは関係ありません。たぶん、質問を詳しく説明する必要がありますか？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top