Используйте клавиши со стрелками, чтобы изменить фокус на кнопках

Question

Я использую JQuery UI Dialog для создания всплывающего окна. У всплывающего окна есть две кнопки. Первая кнопка автоматически выбирается JQuery. Я могу изменить выбор между кнопками и кнопкой выхода с помощью "вкладки".

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

Где я должен поймать события стрелки вниз и как я могу изменить фокус кнопок?

Спасибо за вашу помощь!

Answer 1

Я бы сделал это примерно так:)

$('body').on('keydown', '#terug', function(e) {
    if (e.keyCode === 39) { //right arrow
         $('#ok').focus();
    }
});
$('body').on('keydown', '#ok', function(e) {
    if (e.keyCode === 37) { //left arrow
         $('#terug').focus();
    }
});

Попробуйте:) И если это не сработает, перейдите на глобальный уровень без указания селектора в определении события:

$('body').on('keydown', function(e) {
    if (e.keyCode === 39 && $('#terug').is(':focus')) { //right arrow
         $('#ok').focus();
    }
});

Надеюсь, это поможет!:) Если не дать мне комментарий, и я постараюсь это исправить.:)

Answer 2

Спасибо за вашу помощь! Это сработало. Я добавил свое решение, чтобы завершить этот вопрос.

Я связываю событие keydown только с пользовательскими кнопками:

$(document).on('keydown', '.ui-button', handleUIButtonKeyDown);

После этого я обращаюсь со стрелками влево и вправо

function handleUIButtonKeyDown(event) {
    if (event.keyCode == 37) {
        //left arrow key pressed, select the previous button
        makeButtonFocus($(this).prev(".ui-button"));
    } else if (event.keyCode == 39) {
        //right arrow key pressed, select the next button
        makeButtonFocus($(this).next(".ui-button"));
    }
}

function makeButtonFocus($button) {
    $button.addClass("ui-state-focus");
    $button.focus();
}

Answer 3

Вот более общий ответ
работает на любом количестве кнопок независимо от структуры DOM (btns не обязательно должен быть родным)

$('body').on('keydown', function(e) {
    if (e.keyCode === 37) { //left arrow
         modalKeyboardNav("prev")
    } else if (e.keyCode === 39) { //right arrow
         modalKeyboardNav("next");
    }
});
function modalKeyboardNav(dir) {
    if (!$("body").hasClass("modal-open")) {
        // no modal open
        return;
    }
    var $curModal = $(".modal.show"),
        $curFocus = $(document.activeElement),
        $focusable = $curModal.find(".btn"),
        curFocusIdx = $focusable.index($curFocus);
    if (curFocusIdx < 0) {
        // nothing currently focused
        // "next" will focus first $focusable, "prev" will focus last $focusable
        curFocusIdx = dir == "next" ? -1 : 0;
    }
    if (dir == "prev") {
        // eq() accepts negative index
        $focusable.eq(curFocusIdx - 1).focus();
    } else {
        if (curFocusIdx == $focusable.length - 1) {
            // last btn is focused, wrap back to first
            $focusable.eq(0).focus();
        } else {
            $focusable.eq(curFocusIdx + 1).focus();
        }
    }
}