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.