Использование стрелок-клавиш для навигации

Мне интересно, можно ли перемещаться с помощью клавиш со стрелками через таблицу, созданную с помощью JS (используя jQuery)? Я имею в виду прыжок из ячейки в ячейку... script для Greasemonkey.

Однако предупреждение работает. Я просто понятия не имел, как сделать его работоспособным.

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed " );
       return false;
    }
    if (e.keyCode == 38) { 
       alert( "up pressed " );
       return false;
    }
    if (e.keyCode == 39) { 
       alert( "right pressed " );
       return false;
    }
    if (e.keyCode == 40) { 
       alert( "down pressed " );
       return false;
    }
});
;

Любой намек или что-то очень ценится. Заранее спасибо, Файли

Обновление

Кажется, я объяснил, что ошибаюсь. Попробуй еще раз: Демо

Это может дать вам представление о том, чего я хочу. После выбора одного поля ввода возможна навигация со стрелками. Моя проблема в том, что я просто не могу понять это через GM и jQuery. Любая идея?

Еще раз спасибо за ваше время и усилия.

Наконец это было похоже:


function myTest_analysis1(e,leftkey,up,right,down){
    myTest(e,'','','field_analysis2','field_communication1')

function myTest(e,leftkey,up,right,down) { if (!e) e=window.event; var selectArrowKey; switch(e.keyCode) { case 37: // Key left. selectArrowKey = leftkey; break; case 38: // Key up. selectArrowKey = up; break; case 39: // Key right. selectArrowKey = right; break; case 40: // Key down. selectArrowKey = down; break; } if (!selectArrowKey) return; var controls = window.document.getElementById(selectArrowKey); if (!controls) return; controls.focus(); } } $('#field_analysis1').keydown (myTest_analysis1);

That how it worked out for me. I bet there is a smarter solution, but I couldn't figure it out right now.

Благодарим вас за ваше время и силы.

Ответы

Ответ 1

Вы должны сфокусировать различные ячейки, я приведу пример вместе с помощью .focus()

Вот пример.

Пожалуйста, имейте в виду, что...

a) В этом примере нет ничего, что помешало бы вам выйти из пределов, вам нужно будет ограничить значения currentRow и currentCell количеством ячеек и не допустить их перехода ниже 0.

b) На данный момент отсутствует код для удаления зеленого текста, который я использовал для отображения текущего фокуса. Это означает, что зеленый след остается позади.

Вы могли бы решить оба из них довольно легко, но они сделали бы пример более сложным...

    var currentRow = 0;
    var currentCell = 0;

    function ChangeCurrentCell() {
        var tableRow = document.getElementsByTagName("tr")[currentRow];
        var tableCell = tableRow.childNodes[currentCell];
        tableCell.focus();
        tableCell.style.color = "Green";
    }
    ChangeCurrentCell();

    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
           currentCell--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 38) { 
           currentRow--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 39) { 
           currentCell++;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 40) { 
           currentRow++;
           ChangeCurrentCell();
           return false;
        }
    });

Ответ 2

Вот версия, которая позволяет использовать следующие

ограничения в начале и конце таблицы (первая и последняя ячейка таблицы)
завершается в конце каждой строки и переходит к следующему
прокручивает текущую ячейку на просмотр, если требуется прокрутка, чтобы увидеть ее.
поддерживает щелчок мышью, чтобы выбрать ячейку

Демо на: http://jsfiddle.net/BdVB9/

с html-структурой вроде

<table id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

и javascript

var active = 0;

$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});

$('td').click(function(){
   active = $(this).closest('table').find('td').index(this);
   rePosition();
});


function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    //alert(columns + 'x' + rows);

    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');
    scrollInView();
}

function scrollInView(){
    var target = $('#navigate tr td:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;

        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}

Ответ 3

вот моя версия...

демонстрация

var active;
$(document).keydown(function(e){
    active = $('td.active').removeClass('active');
    var x = active.index();
    var y = active.closest('tr').index();
    if (e.keyCode == 37) { 
       x--;
    }
    if (e.keyCode == 38) {
        y--;
    }
    if (e.keyCode == 39) { 
        x++
    }
    if (e.keyCode == 40) {
        y++
    }
    active = $('tr').eq(y).find('td').eq(x).addClass('active');
});