Управление фокусом табуляции в контекстном окне виджета javascript

Question

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

У кого-нибудь есть предложения по наилучшему способу сделать это, в настоящее время я думаю, что лучший способ состоит в том, чтобы создать массив элементов tabbable при появлении всплывающего окна и просто захватить вкладки, чтобы перебрать этот параметр массива, каждый из них и предотвращение поведения вкладки по умолчанию.

Кто-нибудь знает, есть ли какие-либо рекомендации по этому поводу?

Answer 1

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

<div> 
    <input type="button" value="tabbable one" /> 
    <input type="button" value="tabbable two" /> 
</div> 
<div> 
    <input type="button" value="not tabbable" tabindex="-1"/> 
    <input type="button" value="also not tabbable" tabindex="-1"/> 
</div> 

Хотя я не нашел это в документации до сих пор, кажется, работает во всех тестируемых браузерах (FF 3.5, IE 6 & 7, Opera 9.64).

Другой подход к blur(), когда нежелательный элемент получает фокус:

<div> 
    <input type="button" value="tabbable one" /> 
    <input type="button" value="tabbable two" /> 
</div> 
<div> 
    <input type="button" value="not tabbable" onfocus="blur()"/> 
    <input type="button" value="also not tabbable" onfocus="blur()"/> 
</div> 

Недостаток такого подхода заключается в том, что как только вы нажмете «untabbable» элемент, элемент не будет выбран, и следующая вкладка начнется с самого первого элемента. Это особенно сложно, когда вы переходите назад, что невозможно. Решение этой проблемы было бы активно фокусировать правильный следующий элемент:

<div> 
    <input id="firstTabbable" type="button" value="tabbable one" /> 
    <input type="button" value="tabbable two" /> 
    <input id="lastTabbable" type="button" value="tabbable three" /> 
</div> 
<div> 
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/> 
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/> 
</div> 

Однако, на мой взгляд, это немного слишком сложно.

Answer 2

я попытался сделать следующее при отображении всплывающего окна, кажется, работает в Firefox 3. Это может быть достаточно, чтобы вы начали:

$('#nonpopup a').attr('disabled','true'); 
$('#nonpopup input').attr('disabled','true'); 

Селектор JQuery находит все A и input элементы, находятся в div с id nonpopup и устанавливает атрибут html disabled в true. Если вы не используете JQuery, вам понадобится другой способ найти все эти элементы, но это может быть так же просто, как document.getElementsByTagName().

Это не позволяет браузеру перемещаться по этим элементам. Порядок вкладок по-прежнему выходит из страницы и проходит через браузер Chrome, например, в строке URL.