使用箭头键更改按钮上的焦点

Question

我正在使用JQuery UI对话框来创建弹出窗口。弹出窗口有两个按钮。第一个按钮由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

感谢您的帮助！有效。我添加了我的解决方案来完成这个问题。

我只在ui按钮上绑定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();
        }
    }
}