Как пропустить элементы при вкладке без использования 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

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

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

Answer 4

Может быть:

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

Answer 5

Как говорит @thetacom, вы можете просто использовать элемент другого типа, который не получает фокуса. Если вы все еще хотите сохранить некоторые функции tab , вы можете попробовать 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 не будет табуляцией.