Клавиатура стрелки вверх и вниз

Question

У меня есть один автозаполнение поиска, в котором, набрав несколько символов, он покажет все имена, которые соответствуют введенному символу. Я заполняю эти данные в JSP с помощью тега DIV, с помощью мыши я могу выбрать имена. Но я хочу выбрать имена в теге DIV, которые будут выделены с помощью клавиатуры, стрелки вверх и вниз. Может кто-нибудь, пожалуйста, помогите мне с этим.

Answer 1

Используйте события onkeydown и onkeyup для проверки событий нажатия клавиш в ваших результатах 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
}

Answer 2

скопируйте и вставьте этот фрагмент кода и попробуйте ..

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

Answer 3

Давно я не делал этого, но, думаю, вы можете использовать event.keyCode.

Если возвращены значения 38 и 40, то пользователь нажимает стрелки вверх и вниз соответственно.

Затем вам нужно выбрать строку выше или ниже вашей текущей позиции. Как выбрать строку, будет зависеть от вашей конкретной ситуации.

Answer 4

Я предполагаю, что у вас есть вход, который обрабатывает ввод.

сопоставьте onkeyup-eventhandler с тем входом, в который вы считываете event.keyCode, и делайте вещи, когда это соответствующие коды клавиш для стрелок вверх / вниз (38, 40), чтобы сохранить ссылку на какой узел (элемент в вашем div) вы перемещаете фокус на.

Затем вызовите тот же обработчик, когда вы нажмете клавишу ввода (keyCode 13), как вы нажимаете на него.

Трудно привести пример кодирования, потому что он сильно зависит от контекста, но совет о том, как перемещаться по вашему div, состоит в том, чтобы сделать нас из .nextSibling и .previousSibling, а также .firstChild и .childNodes.