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++;
}
});
});
about 11 months 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 11 months 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 11 months 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 8 months 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 8 months 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 7 months ago
$(‘input,select’).each(function(i,e){ e.attr(‘tabindex’,i) });
=)
about 7 months 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 7 months ago
[UPDATE 2]
$(‘:enabled:visible’).each(function(i,e){ $(e).attr(‘tabindex’,i) });
about 3 months ago
@Fellipe Cicconi , $(’:enabled:visible’).each(function(i,e){ $(e).attr(’tabindex’,i) }); —-> this put tabindex to br ,span , div tags