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

admin管理员组

文章数量:1333437

In the accepted answer to this question Multiple submit buttons in an HTML form the ment 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 acplish 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 ???

In the accepted answer to this question Multiple submit buttons in an HTML form the ment 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 acplish 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 ???

• javascript
• jquery
• html
• tabindex

Share Improve this question Follow edited May 23, 2017 at 12:15 CommunityBot 111 silver badge asked Jan 5, 2016 at 15:48 John HascallJohn Hascall 9,41666 gold badges5151 silver badges7373 bronze badges 1

• did you review Adding tabindex dynamically? – Artem Commented Jan 22, 2016 at 23:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 es 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.

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 ment below):

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

本文标签： javascriptSetting tabindex to quotlast elementquot and quotpenultimate elementquotpossibleStack Overflow