Как ограничить индексы табуляции только наложением и его элементами

У меня есть сложная страница с несколькими оверлеями (тип лайтбокса), которые появляются на основе выбора из нескольких выпадающих меню. Это делается с помощью jQuery. Цель состоит в том, чтобы ограничить пользователя только возможностью вставлять элементы на накладке (выше позиционированного divbox) с клавиатуры. Другими словами, удалите приведенные ниже элементы страницы из последовательности вкладок.

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

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

Итак, мне интересно, есть ли другой способ ограничить индексирование вкладок только оверлейным div, или если есть другой подход, я не думал об этом? Любая помощь будет принята с благодарностью, поскольку она убивает мое время производства!

Ответы

Ответ 1

Вот простое решение проблемы, которое не требует глобального использования tabindex. (используя jQuery). Я проверил его в Firefox, Chrome, Safari, Opera и IE9, IE8 и IE7. Кажется, хорошо работает.

function tabFocusRestrictor(lastItem,firstItem){
    $(lastItem).blur(function(){
        $(firstItem).focus();
    });
}

tabFocusRestrictor ( '# clsButton', '# firstItemInSequence');

поэтому поля ввода html на наложении будут выглядеть примерно так:

<form>
  <input type="text" id="firstItemInSequence" />
  <input type="text" id="secondItemInSequence" />
  <input type="text" id="thirdItemInSequence" />
  <button id="clsButton">close</button>
</form>

Это позволяет кнопке функционировать, как обычно, за исключением размытия, например, когда вы отключаете кнопку, а затем вы попадаете в указанное поле ввода, в этом случае тот, у которого есть идентификатор 'firstItemInSequence ".

Ответ 2

Другое решение. Эта функция дает фокус для управления с id = controlID после нажатия клавиши TAB в элементе управления с tabIndex = maxindex. Это вызовет круговое движение, нажав TAB.

Он будет расположен в:

<body class="body" onkeydown="return onKeyDownTab(event, 7,'txtName');">


function onKeyDownTab(event, maxIndex, controlFocusID)
{

    var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (key == 9)
    {
        try
        {
            if (event.srcElement.id == "" || event.srcElement.className.indexOf("body") > -1)
            {
                document.getElementById(controlFocusID).focus();
                return false;
            }
            if (parseInt(event.srcElement.attributes.tabIndex.value) < 0 || parseInt(event.srcElement.attributes.tabIndex.value) >= maxIndex)
            {
                document.getElementById(controlFocusID).focus();
                return false;
            }
            return key;
        }
        catch (e)
        {
            return false;
        }        
    }
    else
    {
        return key;
    }
};

Ответ 3

Я думаю, что созданный jQuery плагин сделает то, что вам нужно:

https://github.com/spirytoos/TABGuard

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

Ответ 4

jSFiDDLE

$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

setTabindexLimit() функция два атрибута 10, который является последним Tabindex в Div и Selector_With_Where_Tab_Index_You_Want - это класс или идентификатор div, в котором вы хотите Повтор tabindexto.