7

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 ???

1

2 Answers 2

3

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.

2
+50

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]")
4
  • This is close, but only applies tabindex values to inputs. The answer here stackoverflow.com/questions/1599660/… 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 … Jan 23, 2016 at 23:43
  • Fixed plunk with selector from answer you referred
    – Artem
    Jan 23, 2016 at 23:57
  • @JohnHascall tabindex of each element is 0 by default
    – Artem
    Jan 24, 2016 at 0:17
  • Right, if the page has elements with the default value of 0 (reasonably likely). Then if you put these '<Prev' 'Next>' 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. Jan 24, 2016 at 2:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.