Tastatur nach oben und nach unten Pfeile

Question

Ich habe eine automatische Vervollständigungssuche, in der durch Eingabe von wenigen Zeichen alle Namen angezeigt werden, die dem eingegebenen Zeichen entsprechen. Ich bevölkere diese Daten in der JSP mit DIV-Tag, mit der Maus kann ich die Namen auswählen. Aber ich möchte mit dem Auf- und Abwärtspfeil der Tastatur die Namen im DIV-Tag auswählen, die ausgewählt werden sollen. Kann mir bitte jemand aushelfen.

Answer 1

Ich nehme an, dass Sie einen Eingang haben, der die Eingabe behandelt.

map onkeyup-eventhandler für diese Eingabe, in der Sie event.keyCode auslesen, und tun, wenn es die entsprechenden Tastencodes für auf/ab-Pfeil (38, 40), um einen Verweis auf welchen Knoten (Element in Dein div) du bewegst den Fokus auf.

Dann rufen Sie den gleichen Handler, wenn Sie drücken Sie die Eingabetaste (keyCode 13) wie Sie onclick.

Es ist schwer, ein Coding-Beispiel zu geben, da es stark vom Kontext abhängt, aber ein Tipp zur Navigation durch div ist, uns aus .nextSibling und .previousSibling, sowie .firstChild und .childNodes zu machen.

Answer 2

Lange Zeit seit ich das getan habe, aber ich denke, Sie können event.keyCode verwenden.

Wenn die zurückgegebenen Werte 38 und 40 sind, hat der Benutzer die Pfeile nach oben bzw. nach unten gedrückt.

Dann müssen Sie die Zeile über oder unter Ihrer aktuellen Position auswählen. Wie Sie die Zeile auswählen, hängt von Ihrer speziellen Situation ab.

Answer 3

Verwenden Sie die onkeydown und onkeyup Ereignisse für Tastendruckereignisse in den Ergebnissen div überprüfen:

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 
} 

Answer 4

Kopie und dieses Stück Code einfügen und versuchen ..

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