Use arrow keys to change focus on buttons

Question

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'.

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!

Answer 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. :)

Answer 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:

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

Answer 3

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

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