Как повторить tabindex из 1 после того, как он перешел к последнему элементу с tabindex?

Итак, например, вот скрипт:

<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->

Итак, когда пользователь нажимает tab и проходит через шесть текстовых полей, достигает последнего, а затем нажимает tab, он перейдет к содержимому над первым комментарием, верно? Ну, как я могу начать с tabindex="1" снова?

17
html javascript jquery tabindex

5 ответов

к сожалению, вы не можете сделать это без JavaScript. Вы можете слушать TAB (и убедитесь, что это не SHIFT+TAB) нажмите клавишу на последнем элементе и вручную установите фокус на первый элемент внутри обработчика. Однако,привязка этой логики к событиям клавиатуры (т. е. конкретный метод ввода) не является универсальной и может не работать при использовании:

  • мобильный браузер
  • некоторые другие развлечения устройство (smart tv, игровая консоль и т. д. - они обычно используют D-Pad для прыжков между фокусируемыми элементами)
  • доступность услуг

Я предлагаю более универсальный подход, который является агностиком того, как меняется фокус.

идея в том, что вы окружаете свои элементы формы (где вы хотите создать"петля tabindex") со специальными элементами "focus guard", которые также фокусируются (у них есть назначенный tabindex). Вот ваш измененный код HTML:

<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>

<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->

теперь вы просто слушать focus события на этих элементах защиты и вручную меняют фокус на соответствующее поле (jQuery используется для простоты):

$('#focusguard-2').on('focus', function() {
  // "last" focus guard got focus: set focus to the first field
  $('#firstInput').focus();
});

$('#focusguard-1').on('focus', function() {
  // "first" focus guard got focus: set focus to the last field
  $('#lastInput').focus();
});

как вы видите, я также убедился, что мы вернемся к последнему входу, когда фокус перемещается назад от первого входа (например,SHIFT+TAB на первом входе). видео

отметим, что фокус стража!--29--> также назначаются значения tabindex, чтобы убедиться, что они сосредоточены непосредственно перед/после ваших полей ввода. Если вы вручную не установите tabindex на свои входы, то оба Focus guards могут просто иметь tabindex="0" назначена.

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

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

обновление

как отметил nbro, вышеуказанная реализация имеет нежелательный эффект выбора последнего элемента, если он попадает TAB после загрузки страницы (так как это сфокусирует первый фокусируемый элемент, который является #focusguard-1, и это вызовет фокусировку последнего входа. Чтобы уменьшить это, вы можете указать, какой элемент вы хотите изначально сфокусировать и сфокусировать его с еще одним маленьким кусочком JavaScript:

$(function() { // can replace the onload function with any other even like showing of a dialog

  $('.autofocus').focus();
})

С этим, просто выберите autofocus class на любом элементе, который вы хотите, и он будет сосредоточен на загрузке страницы (или любом другом событии, которое вы слушаете).

22

здесь мое решение, где вам не нужны никакие другие элементы. Как вы можете видеть, элементы будут зацикливаться внутри <form> элементы.

$('form').each(function(){
    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
        first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
        }
    });
});
8

вот мое решение, учитывая, что первый вход имеет набор атрибутов "автофокус":

добавьте это после элемента формы (с HTML5 это может быть любой тег):

<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>
1

Я предлагаю вам увеличить ваш tabindex ie. >100 а также дайте tabIndex вашему контейнеру" content " div обратите внимание, что контейнер содержимого должен иметь tabindex меньше, чем поля ввода для ex.99 .

при нажатии tab на последнем поле ввода вручную установите фокус на вашем содержимом div с помощью javascript (вы можете использовать обработчики нажатия клавиш для клавиши tab)

document.getElementById("content").focus();

вы должны дать tabindex вашему "контенту", чтобы установить на него фокус.

теперь, если вы нажмете tab фокус автоматически переключится на первое поле ввода.

надеюсь, что это поможет.

спасибо

0

Да, после перехода через входы он будет прыгать на подходящие элементы, которые не имеют определенной последовательности. Но также, после табуляции всех "tabbable" элементов, фокус будет прыгать " вне " вашего содержимого страницы, на элементы пользовательского интерфейса браузера (вкладки, меню, Закладки и т.д.)

Я думаю, что самый простой способ-обработать keyup событие на последнем входе и перехвате TAB (и SHIFT+TAB если уж на то пошло)

0