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

Если я использую 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/

Ответы

Ответ 1

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

Ответ 2

Посмотрите tabIndex свойство

Ответ 3

Дайте идентификаторы элементов и напишите script в этих строках...

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

Ответ 4

При использовании 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.

Ответ 5

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

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