Как игнорировать HTML-элемент из tabindex?

362

Есть ли способ в HTML сказать браузеру не разрешать индексирование вкладок для определенных элементов?

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

html tabindex Том Гуллен
источник

592

Вы можете использовать tabindex="-1".

Спецификация W3C HTML5 поддерживает отрицательные tabindexзначения:

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

Обратите внимание, что это функция HTML5, которая может не работать со старыми браузерами.
Чтобы соответствовать стандарту W3C HTML 4.01 (с 1999 года) , tabindex должен быть положительным.

Пример использования ниже в чистом HTML.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Развернуть фрагмент

Мартин Хеннингс
источник

12

Похоже, что Google Chrome не поддерживает -1, что имеет смысл, поскольку технически tabIndex поддерживает только 0 -32767 по ссылкеW3 . Поэтому, когда я сделал это; Я использовал 500. Хакиш; но сработало.

Блоха

38

@Flea Начиная с версии 23, Google Chrome поддерживает -1 на tabindex. Не уверен, как давно это произошло, возможно, до 23. Я тестировал «-1» в Chrome 23, Firefox 18, IE8, IE9 и Opera 12.11, и это работало по всем направлениям.

jkupczak

5

Я отредактировал ответ для ссылки на обновленную спецификацию HTML5. tabindexтеперь позволяет иметь отрицательные значения.

Джеймс Доннелли

1

@JamesDonnelly Спасибо за ваше редактирование. Я снова добавил ссылку на спецификацию W3C HTML4 для совместимости браузера.

Мартин Хеннингс

2

Поддерживается с IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx

Skurpi

121

Не забывайте, что, хотя tabindexв спецификациях и в HTML все строчные буквы, в Javascript / DOM это свойство вызывается tabIndex.

Не сходите с ума, пытаясь понять, почему ваши программно измененные вызовы индексов вкладок element.tabindex = -1не работают. Использование element.tabIndex = -1.

Эрик Л.
источник

34

Кажется, это должен быть комментарий, а не ответ.

DrCord

47

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

MalcolmOcean

10

Если это элементы в порядке расположения вкладок, такие как кнопки и привязки, то удаление их из порядка вкладок с tabindex = -1 является своего рода запахом доступности. Если они предоставляют дублирующуюся функциональность, удалите их из последовательности вкладок - все в порядке, и рассмотрите возможность добавления aria-hidden = true к этим элементам, чтобы вспомогательные технологии их игнорировали.

Matt
источник

8

Если вы работаете в браузере, который не поддерживает tabindex="-1", возможно, вам удастся просто дать вещам, которые необходимо пропустить, действительно высокий индекс вкладок . Например, в tabindex="500"основном перемещает порядок табуляции объекта в конец страницы.

Я сделал это для длинной формы ввода данных с кнопкой, брошенной посередине. Это не кнопка, которую люди нажимают очень часто, поэтому я не хотел, чтобы они случайно нажимали на нее и нажимали ввод. disabledне будет работать, потому что это кнопка.

Jemmeh
источник

5

Такой взлом, как "tabIndex = -1", не работает для меня с Chrome v53.

Это то, что работает для Chrome и большинства браузеров:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Развернуть фрагмент

Val
источник

Разве это не назначит элементу вкладку по умолчанию, а не отключит вкладку?

Юрист

@Lawyerson нет, на самом деле он отключает табуляцию, поскольку сам объяснил «removeAttribute». Вы пробовали это, но с другим результатом?

Val

2

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

Юрист

Запустив фрагмент, я могу перейти к notabindexблоку, как если бы он был tabIndex=5после нажатия кнопки. Не проблема мэра, но все же не делает его полностью «не табулированным».

Микаэль Дуй Болиндер

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

dman

3

Способ сделать это путем добавления tabindex="-1". Добавляя это к определенному элементу, он становится недоступным при навигации по клавиатуре. Существует большая статья здесь , которая поможет вам в дальнейшем понять TabIndex .

Неша Зорич
источник

2

Просто добавьте атрибут disabledк элементу (или используйте jQuery, чтобы сделать это за вас). Отключено предотвращает фокусировку или выбор входа.

Яаков Айнспан
источник

Какая версия Chrome?

Яаков Айнспан

Chrome 49.0.2623.75 (64 бит).

Феликс Ив

Моя версия 51.0.2704.103. Проверьте эту скрипку . Вы можете иметь неправильный код, вы никогда не знаете.

Яаков Айнспан

@AtulChaudhary, как это не работает? Вы все еще можете сосредоточиться?

Яаков Айнспан

как только поля отключены, они остаются отключенными, и это проблема в IOS9, но, кажется, работает в IOS10

Atul Chaudhary

Как игнорировать HTML-элемент из tabindex?

Ответы: