Могу ли я игнорировать какой-либо элемент сайта при навигации с помощью клавиши табуляции?

Question

Как вопрос на самом деле. У меня есть поле ввода на моей странице, которое я хотел бы игнорировать при навигации с помощью клавиши на клавиатуре.

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

Answer 1

Вы можете установить tabindex="-1" для этого элемента, чтобы он игнорировался в порядке табуляции. 0 говорит браузеру самостоятельно определять порядок вкладок, -1 говорит браузеру игнорировать его.

Answer 2

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

Более подробная информация доступна здесь http://www.webcheatsheet.com/HTML/controll_tab_order.php например.

UPDATE изменено tabindex = "0" на "-1" на основе комментариев

Answer 3

display: none это вместо.

Answer 4

Я использовал обходной путь disabled флаг для моего элемента ввода, потому что в моем случае ввод пользователя не требуется :)

Пример с 3 входами:

.container {
  display: flex;
  flex-direction: column;
}
input {
  width: 200px;
  margin-bottom: 10px;
}

<div class="container">
  <input placeholder="Not disabled"/>
  <input placeholder="Disabled - skipped by tab" disabled/>
  <input placeholder="Not disabled"/> 
</div>

Надеюсь, что это хорошо работает для кого-то <3 - Chrome, Edge, Firefox, а также для "псевдо" браузера, протестированного IE. </p>