Adding tabindex dynamically

Question

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

Answer 1

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.

Answer 2

Might be better to avoid n++ to set different tabindex numbers.

Instead, try setting tabindex to 0:

$(':input:visible').each(function() {                    $(this).attr('tabindex', '0'); }); 

tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order. ~ developer.mozilla.org

The :input selector basically selects all form controls.

The :visible selector basically selects all elements that are visible.

---

or as suggested in the comments, if you have no other changes to apply to each visible input, then this should be enough:

$(':input:visible').attr('tabindex', '0');