Перейдите через массив и перейдите к следующему элементу при нажатии клавиши

Question

У меня есть массив с буквами, которые я хочу повторить с помощью клавиш вверх и вниз, а затем выберите букву с enter и перейдите к следующему с enter, но я не знаю, как достичь что. До сих пор я получил это:

var i = 0; 

var letters = ['a','b','c','d','e'] 

$(document).ready(function() { 
    $(document).keypress(function(e) { 

    e.preventDefault(); 

    var keyCode = e.which; 
     arrow = {up: 38, down: 40, enter: 13}; 

    switch(e.keyCode) 
    { 
     case arrow.up: 
      alert('up'); 
     break; 

     case arrow.down: 
      alert('down'); 
     break; 

     case arrow.enter: 
      $('#box').html(letters[++i % letters.length]); 
     break; 
    } 
}); 
}); 

Итак, мой первый вопрос: Это идет через массив на клавишу ввода, но я не могу изменить значение ключа. Если я хочу, чтобы клавиша «вниз» перебирала массив, ничего не происходит, что я делаю неправильно? И второе: как я могу сделать, чтобы перейти к новому письму на клавиатуре?

Update:

Окей, теперь я ближе к тому, что я хотел:

case arrow.up: 
      $('#letterbox').html(letters[--i % letters.length]); 
     break; 

     case arrow.down: 
      $('#box').html(letters[++i % letters.length]); 
     break; 

     case arrow.enter: 
      $('#box2').html(letters[++i % letters.length]); 
     break; 

вверх и вниз ключевых итерацию через массив и введите печатает новую букву в DIV '#box2' но он продолжает итерацию первого окна. Как я могу сделать массив итерацией из текущего поля?

Answer 1

Я не знаю точно, почему, но нажатие клавиши не отслеживает клавиши со стрелками. Вместо этого используйте keydown.

Answer 2

Что-то вроде этого, может быть? http://jsfiddle.net/hdyjLLr9/3/

<input type="text" id="displayCurrentSelection" /> 
<input type="text" id="enterSelection" /> 

JS

var i = 0; 
var letters = ['a', 'b', 'c', 'd', 'e']; 
var $currentSelection; 
var $enterSelection; 

$(document).ready(function() { 
    var arrow = { 
       up: 38, 
       down: 40, 
       enter: 13 
      }; 

    $enterSelection = $('#enterSelection'); 
    $currentSelection = $('#displayCurrentSelection'); 
    $currentSelection.val(letters[i]); 

    $(document).keypress(function (e) { 
     e.preventDefault(); 

     var keyCode = e.keyCode || e.which; 

     switch (keyCode) { 
      case arrow.up: 
       i = (++i) % letters.length; 
       break; 
      case arrow.down: 
       if (i > 0) i--; 
       else i = letters.length - 1; 
       break; 
      case arrow.enter: 
       $enterSelection.val(letters[i]); 
       i = (++i) % letters.length; 
       break; 
     } 
     $currentSelection.val(letters[i]); 
    }); 
});