Using jQuery to circumvent tabindex problems
forms, javascript, jquery, tabindex
Solution
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.
Problem
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.