htmljqueryaccessibilitytabindex

Adding tabindex dynamically

I'd like to add tabindex to all form elements. The form is dynamic and I can't add it to the HTML. I would like to run it as a function.

If there are several radio buttons with the same name, each must have it's own tabindex value. Most of the form elements on page start as <input>, except <select>. How do I account for that?

I guess I will need to run a loop and add the attribute, right?

var n = 1; 

$('input, select').each(function() {               
    $(this).attr('tabindex', n++);
});
Solution

  • Strange question, but yes that's the basic idea:

    $(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });

    This uses :input to get everything including buttons and text areas. :not(:hidden) will just exclude the hidden inputs to avoid unnecessary tabs.