Как пропустить элементы при табуляции без использования tabindex?

Question

Есть ли хороший способ в обработчике javascript onfocus(), чтобы переместить фокус на следующий элемент в порядке вкладок, без необходимости вручную вводить идентификатор элемента, который должен быть следующим?

Я построил сборщик дат в HTML в Django/jQuery. Это редактирование строки, за которым следует значок календаря, который открывает календарь. Я хочу иметь возможность перейти от строки редактирования к следующему входу, пропустив ссылку на значок календаря. Я имею в виду, что это будет обобщенный виджет, поэтому я не могу жестко закодировать идентификатор того, что будет дальше, и вызвать.focus(). Я знаю, что мог бы установить атрибуты tabindex на все, но это более ручное, чем я хотел бы. Кроме того, iirc, это не помешает ему сфокусироваться, просто поместит его в конец последовательности табуляции.

Answer 1

Установите tabindex = "-1" для этого элемента управления, и браузер пропустит этот элемент управления с вкладками.

Answer 2

Или же:

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

Answer 3

Может быть:

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

Answer 4

Проверьте эти ресурсы:

• Получение, установка и удаление значений tabindex с помощью JavaScript
• Плагин jQuery Tabindex

Answer 5

Как говорит @thetacom, вы можете просто использовать элемент другого типа, который не получает фокуса. Если вы все еще хотите сохранить некоторые функции вкладки, вы можете попробовать SkipOnTab.

SkipOnTab: плагин jQuery для освобождения выбранных полей формы от последовательности вкладок вперед.

Просто добавь data-skip-on-tab="true" к значку выбора даты (или другим элементам / контейнерам), который вы хотите пропустить. Вы по-прежнему можете щелкнуть, чтобы активировать средство выбора даты или вернуться назад, используя Shift- Tab и использовать клавишу ввода.

Посмотрите простую демонстрацию и демонстрацию бизнес-кейса.

Answer 6

Если это всегда будет вход после календаря, то почему бы и нет:

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

Лично я бы сказал, что если это будет плагин, вы должны просто сделать следующий элемент опцией конфигурации, которая имеет значение по умолчанию, и указать значение по умолчанию в документации.

Answer 7

Используйте div вокруг иконки календаря вместо ссылки. Затем прикрепите события календаря к div. По умолчанию div не будет табуляцией.