title: Tabbing through input fields with jquery
body: <p>i'm dealing with a nice problem:</p>
  
  <p>i've got a jqueryUI dialog, which contains from 3 to 8  fields: on "TAB" keypress, i want the focus to pass through those fields, one after the other following the order i previously set to tabindex html attribute.</p>
  
  <p>I've read online that tabindex attribute isn't treated by the same way from browsers.. and i've been trying it on my own skin.</p>
  
  <p>So.. the question is: is there a way to implement this circular behaviour after TAB key pression?</p>
  
  <p>NB: I can't use third-party plugins..</p>
  
  <p>Here the piece of code that i'm working on:</p>
  
  <pre><code>//... here i set the right values of tabindex to my input fields and then
  $.each($array, function (index, elem) {
  
          var el = elem;
  
          $(el).on('focus', function (e) {
              $(window).keyup(function (e) {
                  var code = (e.keyCode ? e.keyCode : e.which);
                  if (code == 9) {
                      var nextIndex = $(el).attr('tabindex') + 1;
  
                      if (!($('.testPopup').find('input[tabindex=' + nextIndex + ']').length &gt; 0)) {
                          nextIndex = 1;
                      }
  
                      //using timeout - leaves the event following its default behaviour and completing it
                      setTimeout(function () {
                          $('.testPopup').find('input[tabindex=' + nextIndex + ']').focus();
                      }, 1);
                  }
              });
          });
      });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've been able to improve my previous solution, here's the code:</p>
  
  <pre><code>$(el).on('focus', function (e) {
              $(el).off('keydown').on('keydown', function (e) {
  
                  var code = (e.keyCode ? e.keyCode : e.which);
                  if (code == 9) {
  
                      var nextIndex = $(el).attr('tabindex') + 1;
  
                      if (!($('.testPopup').find('input[tabindex=' + nextIndex + ']').length &gt; 0)) {
                          nextIndex = 1;
                      }
  
                      //using timeout - leaves the event following its default behaviour and completing it
                      setTimeout(function () {
                          //Here is the trick which would make my solution working,
                          //but it wouldn't be a flexible reusable solution
                          //$(el).datepicker("hide");
                          $('.testPopup').find('input[tabindex=' + nextIndex + ']').focus();
                      }, 1);
  
                      //e.preventDefault();
                      e.stopPropagation();
                      return false;
                  }
              });
          });
  </code></pre>
  
  <p>Currently the problem is as follow: tabbing through the dialog will focus the right next input-field, but one of these input-fields is a jQueryUI datepicker which is not gonna close itself. If you look at the code i updated, you'll see a commented line <code>$(el).datepicker("hide");</code> which would make the datepicker close.. but, come on.. it the worst solution ever..</p>
  
  <p>I know the fault is of that <code>e.stopPropagation()</code>, but.. how can I make it work? Any suggestion??</p>