Modal avec tabindex=“-1” obtient le focus sur l'onglet

Je travaille avec Twitter Bootstrap pour le moment, et je rencontre un problème étrange dans le tabindex d'un modal:

Je suis en train de l'onglet par la forme des éléments à l'intérieur de l'modal, mais après le dernier bouton, l'accent a disparu avant de revenir sur le bouton fermer. J'ai ajouté une ligne dans la console qui se connecte à quel élément est concentrée, et il s'est avéré être le modal lui-même, même si il a tabindex="-1".

Je ne suis pas en mesure de partager mon code, mais un rapide coup d'oeil à l'Amorçage docs m'ont dit que ça se passe aussi dans leur exemple modal. Le problème se reproduit:

  1. Visite http://getbootstrap.com/2.3.2/javascript.html#modals
  2. Ouvrir la démo modal ("Lancement de la Démo Modal")
  3. Onglet à travers les champs. Vous allez perdre le focus après "Enregistrer les modifications" avant qu'il revient sur le bouton fermer.

Mettre ceci dans la console de log à chaque fois que le modal (ou en fait n'importe quel élément avec tabindex="-1") obtient le focus.

$('[tabindex="-1"]').focus(function(){
    console.log('Focus is on an element with negative tabindex')
});

(Il ouvre également lorsque vous cliquez sur le modal évidemment, mais c'est hors de portée).

Pourquoi cela se produit? Comment puis-je éviter cela? Est-ce un bug lié au navigateur, un bug/feature de Twitter Bootstrap, ou tout autre chose?

OriginalL'auteur Stephan Muller | 2013-10-04

  1. 9

    Trouvaille intéressante. Il semble être une sorte de bug ou de comportement introduit par bootstrap; comportement étrange pour l'onglet index -1.

    Ici est un travail autour de l'utilisation de jQuery, ce qui implique la définition d'un first et last id sur le premier et le dernier onglet-mesure des éléments sur les modaux.

    $('#myModal').keydown(function(e){
  if($('#last').is(":focus") && (e.which || e.keyCode) == 9){
    e.preventDefault();
    $('#first').focus();
  }
});

    Exemple

    http://www.bootply.com/96858

    Très bien, merci. C'est toujours dommage d'avoir à utiliser une solution de contournement contre vraiment résoudre le problème, mais cela semble fonctionner comme je le souhaite 🙂

    OriginalL'auteur Trevor

  2. 0

    réellement se concentrer en allant sur votre principale modal div, vous pouvez vérifier en dessous du code

    #yourModalId:focus
{
    background-color:yellow;
    border:1px solid red;
}

    CODE HTML

     <div id="yourModalId" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

    OriginalL'auteur rajesh kakawat

  3. 0

    Grâce à Trevor. C'est mon code final:

    $('.modal').keydown(function(e){
        var $focusable = $(this).find("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
        if($focusable.last().is(":focus") && !e.shiftKey && e.key == "Tab"){
                e.preventDefault();
                $focusable.first().focus();
        }
        else
            if($focusable.first().is(":focus") && e.shiftKey  && e.key == "Tab"){
            e.preventDefault();
            $focusable.last().focus();
        }

    });

    OriginalL'auteur Canada Wan