Setting tabindex to "last element" and "penultimate element" - is it possible?

Question

In the accepted answer to this question a few submit buttons in the HTML form the comment is raised:

Please do not do this without changing the order of the tabs, so pressing the tab button will cycle through the buttons as they appear on the screen.

My question is: is there a way to set tabindex on these two buttons to do this ordering without , to assign a specific tabindex to every other inline element on the page?

My understanding of tabindex values ​​is that the specified positive values ​​return elements with the specified value, so I find it difficult to figure out a way to do this without going through and assign the rest to the value.

If indeed, assigning a specific tabindex to each element is the only way, is there some kind of (hopefully short and hopefully jQuery) magic to assign, for example, 1 to every appropriate element on the tabindex page?

EDIT
It seems that the solution will be related to the application of a specific tabindex for each other object with tabulation - it seems that the important part of the solution will be: is there a convenient way in jQuery to select each embedded object? All sss and

Answer 1

Using the dynamic addition of tabindex and fixing the buttons:

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

HTML:

 <input type="submit" value="Next" class="r" /> <input type="submit" value="Previous" class="l" /> 

Plunk

Update - a fixed request for choosing not only inputs (see the link in John's comment below):

 $("a[href],area[href],input:not([disabled]),select:not([disabled]),\ textarea:not([disabled]),button:not([disabled]),iframe,[tabindex],\ [contentEditable=true]") 

Answer 2

According to specification:

• Positive values ​​assigned by tabindex arrange items according to tabindex values

• negative values ​​make the elements "non-orientable"

• a value of 0 makes the element focusable but dependent on order on the platform

mdn-html tabindex specification

So, if you want a specific order to be defined on your page, you need to assign a value to each element.

But here comes jquery: Let's say that the elements that should be in order are in the div with id="myDiv" Then you can:

 $("#myDiv").find("*").prop("tabindex", 1); 

This means that every child / subchild element from myDiv has tabindex of 1. Then your two buttons can have the css class assigned (for example: class="highTabIndex" ).

Then you can call jquery again:

 var idx = 2; $("#myDiv").find(".highTabIndex").each(function(idx, element) { element.prop("tabindex", idx++); }); 

and your buttons with the highTabIndex class will be arranged according to the "position" on the page.

Answer 3

A dirty trick would be to simply set tabIndex above the expected number of indexes you will use.

For me, I expected about 100 elements, so I sent tabIndex of the last three elements (I always want them to be the last), to 1000, 1001 and 1002.