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