How do I skip items when tabbing without using tabindex?

Question

Is there a good way, in a javascript onfocus() handler, to trampoline the focus to the next item in the tab order, without having to manually enter the ID of the item that should be next?

I built an HTML date picker in Django/jQuery. It's a line edit followed by a calendar icon that pops up a calendar. I want to be able to tab from the line edit to the next input, skipping the link for the calendar icon. I mean for it to be a generalized widget, so I can't hardcode the id of whatever is next and call .focus(). I know I could set tabindex attributes on everything, but that's more manual than I'd like. Also, iirc, that wouldn't prevent it from taking the focus, it would just put it at the end of the tab order.

Undersheriff

Answer 1

Set tabindex = "-1" for that control and browser will skip that control from tabbing.

Deltoid

This works, but it's not valid. Validators are cranky. Is there a simple way to be valid? w3.org/TR/html401/interact/forms.html#adef-tabindex. "This value must be a number between 0 and 32767." – Awake

Seems to work on FF10 and IE9 at least. @dfrakow, looks like this is a defacto standard. Validation be damned... – Coenobite

I like this solution :) – Frightful

Just to add to mlissner's comment, this also works great on Chrome and Safari! – Alber

Answer 2

Maybe:

$("#your-calendar-icon").focus(function() {
  $(this).trigger("blur");
);

Outthink

This doesn't skip focus, it resets it so that when tab is next pressed it will select the first element on the page – Mcgowen

Answer 3

or:

$("#your-calendar-icon").focus(function() {
    $(somethingElse).trigger("focus");
});

Marrs

Answer 4

Check this resources:

• Getting, setting, and removing tabindex values with JavaScript
• jQuery Tabindex Plugin

Acrostic

those links are dead. – Crash

Answer 5

Use a div around the calendar icon instead of a link. Then attach your calendar events to the div. By default, the div won't be a tab stop.

Berceuse

Answer 6

If it's always going to be the input after the calendar then why not:

$('#your-calendar-icon').focus( function() {
  $(this).next('input').focus();
} );

Personally, I'd say that if it's going to be a plugin you should just make the next element a configuration option that has a default, and specify the default in the docs.

Sair

Answer 7

As @thetacom says, you can just use another type of element, one that doesn't receive focus. In case you still want to keep some of the tab functionality, you can try SkipOnTab.

SkipOnTab: A jQuery plugin to exempt selected form fields from the forward tab order.

Just add data-skip-on-tab="true" to the date picker icon (or other elements/containers) you want to skip. You can still click to activate the date picker or go back using shift-tab and use the enter key.

See the simple demo and the business case demo.

Decortication