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.

Answer 1

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

Answer 2

Maybe:

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

Answer 3

Check this resources:

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

Answer 4

or:

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

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.

Answer 6

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.

Answer 7

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.