Verhinderung tab um über Adressleiste

Könntest du Javascript verwenden, und erfassen Sie das "keydown" - event auf dem element mit der höchsten "tabindex". Wenn der Benutzer drückt die "TAB" - Taste (event.keyCode==9) ohne "Shift" - Taste (event.shiftKey == false), dann einfach den Fokus auf das element mit dem niedrigsten tabindex.

Würdest du dann auch benötigen, um das gleiche zu tun in umgekehrter element mit dem niedrigsten tabindex-Eigenschaft. Erfassen Sie die "keydown" - event für dieses element. Wenn der Benutzer drückt die "TAB" - Taste (event.keyCode==9) MIT der "Shift" - Taste (event.shiftKey == true) setzen Sie den Fokus auf das element mit der höchsten tabindex.

Dies würde effektiv verhindern, dass die Adressleiste immer konzentriert mit der TAB-Taste. Ich bin mit dieser Technik in meinem aktuellen Projekt.

Vergessen Sie nicht zu kündigen, das keydown-Ereignis, wenn der richtige Schlüssel-Kombination gedrückt wird! Mit JQuery ist es "event."preventDefault()". In standard-Javascript, ich glaube, dass du einfach "return false".

Hier ist ein JQuery-snippet laden ich bin mit...

    $('#dos-area [tabindex=' + maxTabIndex + ']').on('keydown', function (e) {
        if (e.keyCode == 9 && e.shiftKey == false) {
            e.preventDefault();
            $('#dos-area [tabindex=1]').focus();
        }
    });
    $('#dos-area [tabindex=1]').on('keydown', function (e) {
        if (e.keyCode == 9 && e.shiftKey == true) {
            e.preventDefault();
            $('#dos-area [tabindex=' + maxTabIndex + ']').focus();
        }
    });

Beachten Sie auch, dass die Einstellung der tabindex=0 hat unerwünschte Ergebnisse, die auf der Reihenfolge, in der die Dinge fokussiert sind. Ich erinnere mich an die (für meine Zwecke), tabindex ist ein 1-basierter index.

Ich hinzufügen, zwei winzige, unsichtbare Elemente auf tabindex 1 und auf der letzten tabindex. Hinzufügen eines onFocus für diese zwei: Das element mit tabindex 1 sollte der Schwerpunkt der letzten echten element, das mit den max tabindex konzentrieren sollte, die erste echte element. Stellen Sie sicher, dass Sie konzentrieren sich die erste wirkliche element auf Dom:loaded.

Nicht sicher, ob dies immer noch ein Problem, aber das ich umgesetzt habe meine eigene Lösung, die nicht jQuery verwenden, kann in dem Fall verwendet werden, wenn alle Elemente haben tabindex="0", und wenn das DOM änderungen vorbehalten. Ich fügte hinzu, ein zusätzliches argument für einen Zusammenhang, wenn Sie einschränken möchten, die tabcycling an ein bestimmtes element mit dem tabindex-Elemente.

Einige kurze Anmerkungen zu den Argumenten:

min muss kleiner als oder gleich max, und contextSelector ist eine optionale Zeichenkette, die, wenn verwendet, sollte ein Gültiger Selektor. Wenn contextSelector ist eine ungültige Auswahl oder einer Auswahl, die nicht übereinstimmen, mit allen Elementen, dann ist die Dokument Objekt dient als Kontext.

function PreventAddressBarTabCyle(min, max, contextSelector) {
    if( isNaN(min) ) throw new Error('Invalid argument: first argument needs to be a number type.')
    if( isNaN(max) ) throw new Error('Invalid argument: second argument needs to be a number type.')
    if( max < min ) throw new Error('Invalid arguments: first argument needs to be less than or equal to the second argument.')
    min = min |0;
    max = max |0;
    var isDocumentContext = typeof(contextSelector) != 'string' || contextSelector == '';

    if( min == max ) {
        var tabCycleListener = function(e) {
            if( e.keyCode != 9 ) return;

            var context = isDocumentContext ? document : document.querySelector(contextSelector);
            if( !context && !('querySelectorAll' in context) ) {
                context = document;
            }

            var tabindexElements = context.querySelectorAll('[tabindex]');
            if( tabindexElements.length <= 0 ) return;
            var targetIndex = -1;
            for(var i = 0; i < tabindexElements.length; i++) {
                if( e.target == tabindexElements[i] ) {
                    targetIndex = i;
                    break;
                }
            }
            //Check if tabbing backward and reached first element
            if( e.shiftKey == true && targetIndex == 0 ) {
                e.preventDefault();
                tabindexElements[tabindexElements.length-1].focus();
            }
            //Check if tabbing forward and reached last element
            if( e.shiftKey == false && targetIndex == tabindexElements.length-1 ) {
                e.preventDefault();
                tabindexElements[0].focus();
            }
        };
    } else {
        var tabCycleListener =  function(e) {
            if( e.keyCode != 9 ) return;

            var context = isDocumentContext ? document : document.querySelector(contextSelector);
            if( !context && !('querySelectorAll' in context) ) {
                context = document;
            }

            var tabindex = parseInt(e.target.getAttribute('tabindex'));
            if( isNaN(tabindex) ) return;
            //Check if tabbing backward and reached first element
            if (e.shiftKey == true && tabindex == min) {
                e.preventDefault();
                context.querySelector('[tabindex="' + max + '"]').focus();
            } 
            //Check if tabbing forward and reached last element
            else if (e.shiftKey == false && tabindex == max) {
                e.preventDefault();
                context.querySelector('[tabindex="' + min + '"]').focus();
            }
        };
    }
    document.body.addEventListener('keydown', tabCycleListener, true);
}

Weitere Hinweise:

Wenn min gleich max, dann tab, Radfahren wird natürlich vorkommen, bis das Letzte element im Kontext erreicht ist. Wenn min ist weniger streng als max, dann Tab-Zyklus von natürlich bis entweder die min oder die max erreicht ist. Wenn Tab-rückwärts und die min erreicht wird, oder durch drücken der Tabulatortaste vorwärts und die max erreicht ist, dann die Tab-Taste wird der Zyklus für die min element oder max element jeweils.

Beispiel:

//For all tabindex elements inside the document
PreventAddressBarTabCyle(0,0);
//Same as above
PreventAddressBarTabCyle(1,1);
//NOTE: if min == max, the tabindex value doesn't matter
//   it matches all elements with the tabindex attribute

//For all tabindex elements between 1 and 15
PreventAddressBarTabCyle(1,15);
//For tabindex elements between 1 and 15 inside
//  the first element that matches the selector: .some-form
PreventAddressBarTabCyle(1,15, '.some-form');
//For all tabindex elements inside the element
//  that matches the selector: .some-form2
PreventAddressBarTabCyle(1,1, '.some-form2');