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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
15
0
15 992
7

Ответы 7

Может быть:

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

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

wnbates 20.11.2015 13:09

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

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

эти ссылки мертвы.

john-jones 21.01.2016 18:35

или же:

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

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

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

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

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

Это работает, но не действует. Валидаторы капризничают. Есть ли простой способ быть действительным? w3.org/TR/html401/interact/forms.html#adef-tabindex. «Это значение должно быть числом от 0 до 32767.»

dfrankow 03.12.2009 01:02

Кажется, работает по крайней мере на FF10 и IE9. @dfrakow, похоже, это стандарт де-факто. Будь проклята валидация ...

mlissner 15.01.2012 11:46

Мне нравится это решение :)

akmur 26.07.2015 13:49

Просто чтобы добавить к комментарию млисснера, это также отлично работает в Chrome и Safari!

Luke Sapan 21.12.2015 17:31

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

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

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

См. простая демонстрация и демонстрация бизнес-кейса.

Другие вопросы по теме