La prévention tab pour faire défiler la barre d'adresse

Vous pouvez utiliser Javascript et de capturer l'événement "keydown" sur l'élément avec le plus de "tabindex". Si l'utilisateur appuie sur la touche "TAB" (événement.keyCode==9) sans la touche "Shift" (événement.shiftKey == false) puis il suffit de placer le focus sur l'élément avec le plus bas de la propriété tabindex.

Vous serait alors aussi besoin de faire la même chose en sens inverse pour l'élément avec le plus bas de la propriété tabindex. La Capture de l'événement "keydown" pour cet élément. Si l'utilisateur appuie sur la touche "TAB" (événement.keyCode==9) AVEC la touche "Shift" (événement.shiftKey == true), alors placez le focus sur l'élément avec la plus haute tabindex.

Ce serait effectivement empêcher la barre d'adresse de jamais être porté à l'aide de la touche de TABULATION. Je suis à l'aide de cette technique dans mon projet en cours.

N'oubliez pas d'annuler l'événement keydown si la bonne combinaison de touche est pressée! Avec JQuery, c'est "l'événement.preventDefault()". En Javascript standard, je crois que vous avez tout simplement "return false".

Voici un JQuery-laden extrait de code que j'utilise...

    $('#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();
        }
    });

Aussi garder à l'esprit que la définition de la propriété tabindex=0 a des résultats indésirables sur l'ordre dans lequel les choses sont concentrés. Je me souviens toujours (pour ma part) que la propriété tabindex est un index basé sur 1.

OriginalL'auteur m-albert

J'ai utilisé pour ajouter deux minuscules, des éléments invisibles sur tabindex 1 et le dernier tabindex. Ajouter un onFocus pour ces deux: L'élément avec la propriété tabindex 1 devrait se concentrer le dernier élément réel, l'un avec le max tabindex devrait se concentrer le premier élément réel. Assurez-vous que vous vous concentrez le premier élément réel sur les Dom:loaded.

OriginalL'auteur Jelmer Jellema

Ne sais pas si c'est encore un problème, mais j'ai mis en place mon propre solution qui n'utilise pas jQuery, peut être utilisé dans le cas où tous les éléments ont tabindex="0", et lorsque le DOM est sujette à changement. J'ai ajouté un argument supplémentaire pour un contexte si vous voulez limiter la tabcycling à un élément spécifique contenant le tabindex éléments.

Quelques notes sur les arguments:

min doit être inférieure ou égale à max, et contextSelector est une chaîne facultative qui, si utilisé doit être valide sélecteur. Si contextSelector est pas valide sélecteur ou un sélecteur qui ne correspond pas avec tous les éléments, puis les document objet est utilisé comme contexte.

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);
}

Plus de notes:

Si min est égal à max, puis onglet vélo peut se produire naturellement jusqu'à ce que le dernier élément du contexte est atteint. Si min est strictement inférieur à max, puis tabulation passera naturellement jusqu'à ce que le min ou la max est atteint. Si la tabulation vers l'arrière et le min est atteint, ou une tabulation à l'avant et à l' max est atteint, alors la tabulation va le cycle de la min élément ou max élément respectivement.

Exemple d'utilisation:

//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');

OriginalL'auteur jumper