Setting focus using left and right arrows (HTML + JS)

Question

Is there any to make the left arrow behave like the tab button (set focus to the next focusable item) and the right arrow behave like a shift+tab (set focus to the previous focusable item)?

I've gotten this far:

$().keypress(function(e) {
    if (e.keyCode == 37) {
        alert('I want to do a shift-tab');
    }
    else if (e.keyCode == 39) {
        alert('I want to do a tab');
    }
});

But google isn't being that helpful so I thought I'd put a quick post up here while I google some more.

Thanks!

Oh, and it's purely for FF3.0 so I don't need to worry about other browser nuisances.

Answer 1

What you have so far seems fine.

You could keep a list of 'focusable' items and just iterate through the list keeping a pointer to the current one:

// or $('input')..depends what you want to focus on
var nodes = $('.focusable'), idx = -1;
$().keypress( function(e) {
   if (e.keyCode === 37) {
     nodes.get(++idx).focus();
    }
    else if (e.keyCode === 39) {
       nodes.get(--idx).focus();
    }
 });

This is just a rough outline though. You'd need to check the idx before doing something to make sure you don't slip past the beginning or end of the focusable elements array. You'll also need to be careful about calling this when the user is inside of a textbox.