Динамическое добавление tabindex

Я хочу добавить tabindex ко всем элементам формы. Форма динамическая, и я не могу добавить ее в HTML. Я хотел бы запустить его как функцию.

Если имеется несколько радиокнопок с одинаковым именем, каждая из них должна иметь собственное значение tabindex. Большинство элементов формы на странице начинаются с <input>, кроме <select>. Как мне это объяснить?

Думаю, мне нужно будет запустить цикл и добавить атрибут, верно?

var n = 1; 

$('input, select').each(function() {               
    $(this).attr('tabindex', n++);
});

html jquery accessibility tabindex
person santa    schedule 27.02.2013    source источник
comment
эй, @santa, есть шанс, что ты сможешь обновить принятый ответ на этот вопрос? Я знаю, что этот вопрос может быть немного старым, но все еще что-то люди могут все еще рассматривать, однако следует использовать только значения 0 или -1. Смотрите мой ответ ниже для рекомендуемого решения!   -  person allenski    schedule 23.11.2020

Ответы (4)


arrow_upward
53
arrow_downward

Странный вопрос, но да, это основная идея:

$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });

При этом используется :input, чтобы получить все, включая кнопки и текстовые области. :not(:hidden) просто исключит скрытые входы, чтобы избежать ненужных вкладок.

person Brandon    schedule 27.02.2013
comment
Почему это странно? В некоторых браузерах есть проблемы с переключением переключателей той же группы... Спасибо. - person santa; 28.02.2013
comment
Это странно, потому что вы наверняка получите индексы вкладок, но не в каком-либо гарантированном порядке. Таким образом, вы можете обнаружить, что это заставляет вас переключаться между переключателями случайным образом. - person Brandon; 28.02.2013
comment
Разве это не будет проходить через мою HTML-структуру? У меня нет причудливой планировки. - person santa; 28.02.2013
comment
Ах, похоже, что jQuery действительно гарантирует, что порядок соответствует порядку документа: selector-specified" title="является тем, что объекты порядка возвращаются указанным селектором jquery"> stackoverflow.com/questions/1636201/ - person Brandon; 28.02.2013
comment
$(:input:not(:hidden)).each(function (i) { $(this).attr('tabindex', i + 1); }); было бы даже лучше, потому что в противном случае табулятор также позволит вам перемещаться по скрытым полям! - person RSeidelsohn; 02.04.2014
comment
Где можно разместить этот вызов на странице angularJS? - person jessewolfe; 02.03.2017
comment
@jessewolfe звучит как отличная идея для нового вопроса SO. - person Brandon; 02.03.2017
comment
Я бы не советовал так поступать! Смотрите мой ответ ниже для лучшего подхода. - person allenski; 05.12.2018

arrow_upward
15
arrow_downward

Возможно, лучше не использовать n++ для установки разных tabindex номеров.

Вместо этого попробуйте установить tabindex в 0:

$(':input:visible').each(function() {               
    $(this).attr('tabindex', '0');
});

tabindex="0" означает, что элемент должен находиться в фокусе при последовательной навигации с помощью клавиатуры, но его порядок определяется исходным порядком документа. ~ developer.mozilla.org

Селектор :input в основном выбирает все элементы управления формы.

Селектор :visible обычно выбирает все видимые элементы.

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

$(':input:visible').attr('tabindex', '0');
person allenski    schedule 26.07.2018
comment
В этом случае вам даже не нужен цикл, просто используйте $(':input:visible').attr('tabindex', '0');. - person mbomb007; 21.10.2020

arrow_upward
0
arrow_downward

Здесь я описал, как динамически добавлять значения aria-selected и tabindex через jquery. Я также хочу увидеть, как доступность работает с ролью tablist, tab и tabpanel и как работают атрибуты aria. Надеюсь, этот код поможет:

 var $tabs = $('.tabs');
 var $panels = $('.panel');

 $tabs.on('click', 'a', function (e) {
 e.preventDefault();
  var id = $(this).attr('href');

  // Find the currently visible tab and panel and hide them
$tabs.find('[aria-selected="true"]').attr({
            'aria-selected': false,
            'tabindex': -1
        });
   $(this).attr({
            'aria-selected': true,
            'tabindex': 0
        });
});

Вкладка Обертка: -

<ul class="tabs" role="tablist">
  <li role="presentation"><a href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a></li>
  <li role="presentation"><a href="#tab-2" role="tab" aria-controls="tab-2">Tab 2</a></li>
  <li role="presentation"><a href="#tab-3" role="tab" aria-controls="tab-3">Tab 3</a></li>
</ul>

<div class="tab-panels">
  <div class="panel" id="tab-1" role="tabpanel" aria-hidden="false">…</div>
  <div class="panel" id="tab-2" role="tabpanel" aria-hidden="true">…</div>
  <div class="panel" id="tab-3" role="tabpanel" aria-hidden="true">…</div>
</div>
person Devsaiful    schedule 19.02.2021

arrow_upward
0
arrow_downward

Один из подходов — переместить элемент выше в DOM. Элемент в верхней части дерева DOM будет сфокусирован первым с помощью вкладок по сравнению с нижними.

person Gautam Arora    schedule 09.06.2021