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

【问题标题】：Use arrow keys to change focus on buttons使用箭头键更改按钮的焦点
【发布时间】：2014-05-02 14:22:19
【问题描述】：

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

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

我必须在哪里捕获箭头键按下事件以及如何更改按钮的焦点？

感谢您的帮助！

【问题讨论】：

标签： javascript jquery button jquery-ui-dialog arrow-keys

【解决方案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();
    }
});

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

【讨论】：

【解决方案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();
}

【讨论】：

【解决方案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();
        }
    }
}

【讨论】：