Using jQuery to circumvent tabindex problems

Question

I'm trying to control my forms and how the user interacts with them via the form elements' tabindex property. All of my elements have tabindex specified, and I want this value to be respected and used properly.

I'm currently developing on Mac/Firefox and I'm aware of the default Mac system setting that sets tab-switching to only input elements and lists. However, I want to override this and any other settings that may get in the way of this on any system/browser.

I'm using jQuery to try to get around this. Here's my code at this point:

$(":input").keypress(function(e){
    if (e.which == 0)
    {
        tindex = parseInt($(this).attr("tabindex")) + 1;
        $(":input[tabindex='" + tindex + "']").focus();
    }
});

However, this isn't working in the way I want it to. When the default Mac setting is enabled, this actually skips a tabindex, and skips non-text/textarea items altogether. For example, if I'm on input[tabindex=2] and I press the "Tab" key, I'm sent to input[tabindex=4]. If I'm on input[tabindex=2] and there's a select box between input[tabindex=2] and input[tabindex=4], I'm sent to input[tabindex=5].

I want input[tabindex=2] to send me to input[tabindex=3], select[tabindex=3], input[type=radio][tabindex=3], etc.; basically whatever has tabindex of 3.

Let me know of any ideas to circumvent this problem. Also please tell me if you know of anything else on any other systems/browsers that I should be looking at.

Answer 1

Add e.preventDefault(); to your keypress event handler. This will stop the browser from performing its default action on this event. This will also stop the browser from following a link if it's placed in a click handler.

See documentation.