Javascript Girl
  1. Javascript Girl
  3. Clavier haut et bas flèches
Intereting Posts
Le marqueur standard dans Google Maps est trop petit Obtenir des noms de fichiers depuis le plugin javascript de upload Test pour visible dans le test QUnit du widget JQueryUI Fonction d'ajout de Java à l'objet json sans utiliser de guillemets. Quand une section CDATA est-elle nécessaire dans une balise de script? Le type MIME est-il inutile pour le téléchargement de fichiers? (En particulier, en utilisant l'API de fichier Javascript)? Javascript Imprimer le contenu iframe seulement Multiline questionaire éditable Comment obtenir la valeur de l'horodatage dans php qui est similaire à getTime () en javascript Fonction non définie Exécuter JavaScript sans navigateur? Comment enlever une étiquette de brochure lorsqu'une couche de topojson qui la contient est enlevée Pourquoi cette fonction de prototype JavaScript se brise-t-elle jQuery? Angular ng-click à l'intérieur d'un graphique d3 créé dynamiquement ne fonctionne pas Faites défiler jusqu'au bas de div?

Clavier haut et bas flèches

J'ai une recherche automatique, dans laquelle, en tapant quelques caractères, il affichera tous les noms qui correspondent au caractère saisi. Je remplis ces données dans le jsp à l'aide de la balise DIV, en utilisant la souris, je peux sélectionner les noms. Mais je souhaite sélectionner les noms dans la balise DIV à sélectionner à l'aide du clavier en haut et en bas de la flèche. Est-ce que quelqu'un peut m'aider?

Utilisez les événements onkeydown et onkeyup pour vérifier les événements de touche dans vos résultats div: 

 var UP = 38; var DOWN = 40; var ENTER = 13; var getKey = function(e) { if(window.event) { return e.keyCode; } // IE else if(e.which) { return e.which; } // Netscape/Firefox/Opera }; var keynum = getKey(e); if(keynum === UP) { //Move selection up } if(keynum === DOWN) { //Move selection down } if(keynum === ENTER) { //Act on current selection }

Copiez et collez ce code et essayez … 

 <style> div.active{ background: lightblue } </style> <center> <input type="text" id="tb"> <div id="Parent" style="position:absolute;display:block;left:428px; width:146px;top:38px; height:100px; border: 2px solid lightblue; overflow:auto;"> <div id="childOne">1 </div> <div id="childOne">2 </div> <div id="childOne">3 </div> <div id="childOne">4 </div> <div id="childOne">5 </div> <div id="childOne">6 </div> <div id="childOne">7 </div> <div id="childOne">8 </div> <div id="childOne">9 </div> <div id="childOne">10 </div> </div> </center> <script type="text/javascript"> var scrolLength = 19; 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 > 1){ scrollDiv(); } if(this.pointer == 0) document.getElementById("Parent").scrollTop = 0; 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; scrolLength = 20; this.list[this.pointer].className = 'active'; this.textbox.value = this.list[this.pointer].innerHTML; } } function scrollDiv(){ if(window.event.keyCode == 40){ document.getElementById("Parent").scrollTop = scrolLength; scrolLength = scrolLength + 19; } else if(window.event.keyCode == 38){ scrolLength = scrolLength - 19; document.getElementById("Parent").scrollTop = scrolLength; } } } new autocomplete( 'tb', 'Parent' ); </script>

Je suppose que vous avez une entrée qui gère l'entrée.

Map onkeyup-eventhandler pour cette entrée dans laquelle vous lisez event.keyCode, et faites des choses quand il s'agit des codes clés appropriés pour la flèche vers le haut / vers le bas (38, 40), pour garder une référence à quel nœud (élément dans votre div) vous Mettez l'accent sur.

Ensuite, appelez le même gestionnaire lorsque vous appuyez sur enter (keyCode 13) comme vous faites onclic.

Il est difficile de donner un exemple de codage car il dépend fortement du contexte, mais un astérisque sur la façon de naviguer dans votre div est de nous créer .nextSibling et .previousSibling, ainsi que .firstChild et .childNodes.

Depuis longtemps, je suppose que vous pouvez utiliser event.keyCode .

Si les valeurs renvoyées sont 38 et 40, alors l'utilisateur a enfoncé les flèches haut et bas respectivement.

Vous devez alors sélectionner la ligne ci-dessus ou en dessous de votre position actuelle. Comment choisir la ligne dépend de votre situation particulière.