Comments on: Setting your tabindex on your html forms automatically with jQuery

By: srage

srage — Fri, 27 Aug 2010 01:21:01 +0000

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) });

By: Hilton Gonçalves

Hilton Gonçalves — Tue, 25 May 2010 16:35:52 +0000

$(‘: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) });

By: Ole Marius Løset

Ole Marius Løset — Thu, 18 Mar 2010 05:48:18 +0000

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) ;
});
});

By: cypp

cypp — Fri, 27 Nov 2009 10:43:34 +0000

@Fellipe Cicconi , $(’:enabled:visible’).each(function(i,e){ $(e).attr(’tabindex’,i) }); —-> this put tabindex to br ,span , div tags

By: Fellipe Cicconi

Fellipe Cicconi — Wed, 12 Aug 2009 00:30:46 +0000

[UPDATE 2]

$(‘:enabled:visible’).each(function(i,e){ $(e).attr(‘tabindex’,i) });

By: Fellipe Cicconi

Fellipe Cicconi — Wed, 12 Aug 2009 00:26:53 +0000

[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

By: Fellipe Cicconi

Fellipe Cicconi — Wed, 12 Aug 2009 00:18:54 +0000

$(‘input,select’).each(function(i,e){ e.attr(‘tabindex’,i) });

By: Shailesh

Shailesh — Sun, 12 Jul 2009 18:04:24 +0000

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

By: Alon

Alon — Fri, 10 Jul 2009 20:10:20 +0000

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).

By: Dirk-Jan de Groot

Dirk-Jan de Groot — Sat, 28 Mar 2009 13:07:20 +0000

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.