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

Question

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

Please don't do this without also changing the tab order, so that hitting the tab button will cycle through the buttons as they appear on screen.

My question is: is there a way to set the tabindex on those two buttons to accomplish this ordering without having to assign a specific tabindex to every other tabable element on the page?

My understanding of tabindex values is that specified positive values proceed elements w/o a specified value, so I am at a loss to figure out a way to do this w/o going through and assigning everything else a value.

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

EDIT
As it looks like the solution is going to involve applying a specific tabindex to every other tabable object -- it seems like an important part of the solution is going to be: is there a convenient way in jQuery to select every tabable object? All s s s and ???

did you review [Adding tabindex dynamically](http://stackoverflow.com/questions/15123054/adding-tabindex-dynamically)? — Artem, Jan 22 '16 at 23:35

score 3 · Answer 1 · answered Jan 23 '16 at 00:01

According to the specification:

positiv values assigned to tabindex orders the elements according to their tabindex values
negative values make elements "unfocusable"
a value of 0 makes the element focusable but its order dependents on the platform

mdn-html specification of tabindex

So if you want to have a specific order in your page you have to assign a value to each element.

But here comes jquery: Say the elements which should be in order are in a div with id="myDiv" You can then do:

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

This would make every child/subchild element of myDiv have a tabindex of 1. Then your two buttons could have a css class assigned (e.g: 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 class highTabIndexwould be orderd according to "position" in the page.

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

Using Adding tabindex dynamically and fixing button indecies:

$(":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 - fixed query to select not only inputs (check 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]")

edited May 23 '17 at 12:31

Community

1
1

answered Jan 22 '16 at 23:58

Artem

823
8
14

This is close, but only applies tabindex values to inputs. The answer here http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus lists all the focucable elements which can have a tabindex. Since I don't want to disturb a pages existing tab order I think the answer is to iterate through all do usable elements on the page and find the largest tabindex in use and then use that value +1 and +2 … – John Hascall Jan 23 '16 at 23:43
Fixed plunk with selector from answer you referred – Artem Jan 23 '16 at 23:57
@JohnHascall tabindex of each element is 0 by default – Artem Jan 24 '16 at 00:17
Right, if the page has elements with the default value of 0 (reasonably likely). Then if you put these '' buttons at the bottom and just give then positive tabindexes, then they become the first 2 elements in the taborder -- definitely the wrong thing to do. So it seems the only solution is to walk the page, saving a list of the all elements with tabindex 0 and finding the highest tabidex, `H`, then walk the list of zero-valued tabindex giving each of them a value H+1, H+2, ... ending with the two buttons having the highest tabindexes. – John Hascall Jan 24 '16 at 02:29

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

2 Answers2