Как пропустить элемент формы из TAB-навигации?

Question

Если я использую TAB на клавиатуре, курсор переходит от 1 до 4 (1 → 2 → 3 → 4)

Как я могу пропустить номер 3? Я хотел бы пойти 1 → 2 → 4.

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3"></td><td><input type="text" value="4"></td></tr>
</table>

LIVE: http://jsfiddle.net/49Vca/

Answer 1

Если вы установите tabindex = "-1" на самом входе # 3, вы не сможете перейти на # 3

Answer 2

Взгляните на tabIndex свойство

Answer 3

Если использовать jquery в порядке, вы можете попробовать SkipOnTab .

SkipOnTab : Плагин jQuery для освобождения выбранной формыполя из последовательности переадресации.

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

В вашем случае:

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3" data-skip-on-tab="true"></td><td><input type="text" value="4"></td></tr>
</table>

См. простая демонстрация и демонстрация бизнес-кейса .Вы также можете попробовать раздвоенный jsfiddle с SkipOnTab .

Answer 4

Дайте ID элементов и напишите на этих строках скрипт ...

function changeTabIndex()
  {
  document.getElementById('1').tabIndex="1"
  document.getElementById('2').tabIndex="2"
  document.getElementById('3').tabIndex="-1"
  document.getElementById('4').tabIndex="3"
  }
</script>

Answer 5

Предполагая, что есть причина, по которой 3 должна оставаться в виде вкладок (например, представление MVC, где элемент является элементом управления вводом и должен оставаться частью порядка табуляции, иначе он не будет отправлять данные обратно в контроллер),вы, вероятно, не сможете пропустить его в обоих направлениях, и если вы все же найдете способ, это будет зависеть от ошибки, которая будет исправлена ​​без предупреждения, чтобы привести браузер обратно в соответствие со спецификациями W3 относительно порядка вкладок.

Чтобы пропустить в прямом или обратном направлении (но не в обоих!), Добавьте обработчик события onfocusin () к элементу 3, который вызывает focus () для элемента, следующего непосредственно за ним или предшествующего ему.Если событиям onfocus по-прежнему разрешалось передавать ранее сфокусированный элемент управления в параметре события (как event.relatedTarget), вы могли бы сказать, чем был ранее сфокусированный элемент, и перенести элемент управления на предыдущий элемент, если фокус пришел из следующего элемента.Однако спецификация W3 поясняет, что это не совместимое поведение, и браузеры, совместимые с HTML5, должны передавать значение null для event.relatedTarget и делать все остальное в своих возможностях, чтобы любой обработчик событий focus () не имел доступа кидентичность ранее сфокусированного элемента управления, в частности обнуление любого такого поля перед вызовом обработчика события focus () или blur () в клиентском коде.