Accéder au contenu Div à l'aide des touches fléchées Haut et Bas à l'aide de javascript

Question

J'ai une balise Div qui contient 4 balises Div enfant

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

J'aimerais maintenant accéder à ces divs à l'aide des touches fléchées haut et bas via Javascript. La div ci-dessus est affichée en cliquant sur une zone de texte. Je souhaite que l'utilisateur puisse choisir l'une des divs enfant et que la valeur sélectionnée apparaisse dans la zone de texte. J'ai obtenu le résultat final en joignant un événement onClick à chaque enfant.

Answer 1

Recherchez-vous ce que l'on appelle l'auto-complétion ou des suggestions?

Answer 2

Voici une solution sans bibliothèque pour vous aider à démarrer.

Vous voudrez peut-être ajouter des événements qui masquent et affichent le div lorsque le champ de texte gagne ou perd le focus. Peut-être que [esc] devrait effacer la sélection? (Je ne l'ai pas testé par exemple)

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

Vous recherchez vraiment 'Autosuggest / Autocomplete'. Cela prend beaucoup de temps à implémenter complètement si vous voulez le faire en javascript pur, mais oui, vous pouvez utiliser l'exemple de strager pour commencer.

Je recommande d'utiliser plutôt JQuery . JQuery a un très joli plug-in de saisie semi-automatique que vous pouvez utiliser. Je viens de mettre en œuvre un de mes projets il y a quelques jours et cela semble fonctionner correctement.

Il y a un dicton important à retenir lors de la création d'un logiciel: "N'essayez pas de réinventer la roue".

Si d'autres programmeurs l'ont déjà fait et qu'ils ont la gentillesse de le partager, utilisez-le et remerciez-le.

Salut!

Answer 4

Que voulez-vous dire "accédez-y avec les touches fléchées"? Il y a du texte dans chaque div ... ils ne contiennent aucun élément d'interaction, le clavier n'a donc aucune pertinence ici. Peut-être avez-vous besoin d'élaborer votre question?