Self-proclaimed greatness is a hard thing to prove.
Setting your tabindex on your html forms automatically with jQuery

The tabindex is absolutely necessary for controlling the tab order through a really long form, from a usability and accessibility standpoint. This is probably not the preferred way to do this, you should be setting the tabindex attribute on all of your input elements in your html. Now if you work with lazy developers, that often forget to set the tabindex, you may find this to be an acceptable solution.
Quick walk through:
- The outside function is your document ready function in jQuery (explaining for those new to jQuery)
- The tabindex variable is there to keep track of the index across multiple forms on the page (another reason you may want to use something like this, if your view code is modular and split into a bunch of snippets or includes)
- The select grabs all the input and select elements on the page we then exclude the hidden input boxes
- We then set the tabindex and increment the variable
$(function(){
var tabindex = 1;
$('input,select').each(function() {
if (this.type != "hidden") {
var $input = $(this);
$input.attr("tabindex", tabindex);
tabindex++;
}
});
});
| Print article | This entry was posted by webguy on December 18, 2008 at 3:59 pm, and is filed under DOM. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |


about 1 year ago
can u explain your code a little bit more?
1. why does the variable “$input” starts with an $ ?
2. why do u need the variable “tabname” ?
3. what is the variabel “index” for?
it must not be called “tabindex = tabnum;”
about 1 year ago
1) I typically put a $ in front of variables I’ve stored a jQuery object in just to remind me it’s a jQuery object.
2) I don’t, looks like a piece of debug code I had laying around, when developing I had console.log statements to the console in firebug
3) Absolutely, looks like a typo, as a side note allowing static indexing in the page has gotten me in trouble as a developer can really throw off your index by statically applying an index
I’ve modified the script to fix the index variable
about 1 year ago
i think you could you simplify this to:
var tabindex = 1;
$(“form input”).not(‘input[type=hidden]‘).each(function() {
$(this).attr(“tabindex”, tabindex);
tabindex++;
});
However, it doesn’t seem to work really reliably to add tabindex through the DOM.
about 1 year ago
This makes it more usable I think … it finds textarea tags, and it will not tabindex anything that is not visible (including hidden items, or just items inside divs that are hidden etc).
function reassignTabOrders(){
var tabindex = 1;
$(‘input,select,textarea’).each(function() {
var $input = $(this);
if ($input.is(‘:visible’)) {
$input.attr(“tabindex”, tabindex);
tabindex++;
}
});
}
about 1 year ago
This is what I was able to get working (the quotes in the Alon’s comment got changed to the non-ascii chars):
$(document).ready(function(){
$(‘form’).each(function() {
var tabindex = 1;
$(‘input,select,textarea’).each(function() {
var $input = $(this);
if ($input.is(‘:visible’)) {
$input.attr(“tabindex”, tabindex);
tabindex++;
}
});
});
});//document.ready
about 1 year ago
$(‘input,select’).each(function(i,e){ e.attr(‘tabindex’,i) });
=)
about 1 year ago
[UPDATE]
// all needed visible elements at once in one line
$(‘:input:visible, :radio:visible, :checkbox:visible’).each(function(i,e){ e.attr(‘tabindex’,i) });
// ‘:input’ – selects all input, textarea, select and buttons
// ‘:radio’ – selects all radios
// ‘:checkbox’ – selects all checks
// ‘:visible’ – selects only visible elements
source: http://docs.jquery.com/Selectors
about 1 year ago
[UPDATE 2]
$(‘:enabled:visible’).each(function(i,e){ $(e).attr(‘tabindex’,i) });
about 9 months ago
@Fellipe Cicconi , $(’:enabled:visible’).each(function(i,e){ $(e).attr(’tabindex’,i) }); —-> this put tabindex to br ,span , div tags
about 5 months ago
This would probably not happen in many cases, but when I used this for the sign-in form on my website, I got an error from the input type password.
I solved it like this:
$j(document).ready(function() {
var tabindex = 0; // FYI: Tabindexes starts with 0.
$j(“:input[type=text]:visible :radio:visible, :checkbox:visible”).each(function(i,e){
$j(e).attr(‘tabindex’,i) ;
});
});
about 3 months ago
$(‘:input[type=text]:visible, :input[type=submit]:visible, :input[type=reset]:visible, :radio:visible, :checkbox:visible, select:visible, textarea:visible’)
.each(function(i){ $(this).attr(‘tabindex’,i+1) });
about 1 week ago
according to the jQuery docs “The :input selector basically selects all form controls.”
so it’s as easy as $(‘:input:visible’).each(i,e){ $(e).attr(‘tabindex’, i) });