how to set tab order in jquery

Question

I'm using Telerik controls, specifically the numerical textbox where you can set a up-down arrow to increment/decrement values in a textbox. I am required to set the tab order to move to the next field but since there's a button on the up-down arrow, the browser will go through those buttons first then move to the next textbox field.

How do you set the jquery to detect the next visible textbox/dropdown/etc input field and move to that on pressing the tab button instead of running through the buttons near it?

Answer 1

$(function() {
  var tabindex = 1;
  $('input,select').each(function() {
     if (this.type != "hidden") {
       var $input = $(this);
       $input.attr("tabindex", tabindex);
       tabindex++;
     }
  });
});

Answer 2

You actually set this with the HTML attribute tabindex ordered ascending numerically for all inputs on the page. So to skip the buttons, start with the first input on the page assigning it tabindex=1, the second tabindex=2, setting subsequent inputs accordingly. When you get to the buttons that you want to skip simply don't give them a tabindex value, or give them indices at the end of the list.

Answer 3

You can also try this

$('input,select :visible').each(function (i) { $(this).attr('tabindex', i + 1); });