Javascript: 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

Maybe:

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

Answer 2

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

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.

Answer 6

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