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

I am using the JQuery UI Dialog to create a pop-up. The pop-up has two buttons. The first button is automaticly selected by JQuery. I can change the selection between the buttons and the exit button with 'tab'.

我正在使用JQuery UI对话框来创建弹出窗口。弹出窗口有两个按钮。第一个按钮由JQuery自动选择。我可以使用“标签”更改按钮和退出按钮之间的选择。

I want to change the selection (only between the two buttons) also with the left and right arrow keys on the keyboard.

我想用键盘上的左右箭头键更改选择（仅在两个按钮之间）。

Where do I have to catch the arrow key down events and how can I change the focus of the buttons?

我在哪里可以捕捉箭头按键事件，如何更改按钮的焦点？

Thanks for your help!

谢谢你的帮助！

3 个解决方案

#1

I would do it something like that :)

我会这样做的:)

$('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();
    }
});

Try it :) And if this won't work then go global without specifying selector in event definition:

尝试一下:)如果这不起作用，那么去全局而不在事件定义中指定选择器：

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

Hope this will help! :) If not give me a comment and i will try to fix this. :)

希望这会有所帮助！ :)如果不给我评论，我会尽力解决这个问题。 :)

#2

Thanks for your help! It worked. I added my solution to complete this question.

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

I bind the keydown event only on the ui-buttons:

我只在ui按钮上绑定keydown事件：

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

After that I handle the left and right arrow keys

之后我处理左右箭头键

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();
}

#3

Here's a more generic answer
works on any number of buttons irregardless of DOM structure (btns need not be siblings)

这里有一个更通用的答案适用于任何数量的按钮，无论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();
        }
    }
}

#1