title: Using jQuery to circumvent tabindex problems
body: <p>I'm trying to control my forms and how the user interacts with them via the form elements' <code>tabindex</code> property. All of my elements have <code>tabindex</code> specified, and I want this value to be respected and used properly.</p>
  
  <p>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.</p>
  
  <p>I'm using jQuery to try to get around this. Here's my code at this point:</p>
  
  <pre><code>$(":input").keypress(function(e){
      if (e.which == 0)
      {
          tindex = parseInt($(this).attr("tabindex")) + 1;
          $(":input[tabindex='" + tindex + "']").focus();
      }
  });
  </code></pre>
  
  <p>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 <code>input[tabindex=2]</code> and I press the "Tab" key, I'm sent to <code>input[tabindex=4]</code>. If I'm on <code>input[tabindex=2]</code> and there's a <code>select</code> box between <code>input[tabindex=2]</code> and <code>input[tabindex=4]</code>, I'm sent to <code>input[tabindex=5]</code>.</p>
  
  <p>I want <code>input[tabindex=2]</code> to send me to <code>input[tabindex=3]</code>, <code>select[tabindex=3]</code>, <code>input[type=radio][tabindex=3]</code>, etc.; basically whatever has <code>tabindex</code> of 3.</p>
  
  <p>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.</p>