Modal mit tabindex="-1" wird der Fokus auf tab

Arbeite ich mit Twitter Bootstrap im moment, und ich bin der Begegnung ein seltsames problem, das in der tabindex-Eigenschaft eines modal:

Ich versuche auf die Registerkarte mit der Formular-Elemente innerhalb des modal, aber nach den letzten Knopf der Fokus verschwand, bevor Sie wieder auf die Schaltfläche "schließen". Ich habe eine Zeile in der Konsole, logs, welches element fokussiert wird, und es stellte sich heraus, dass der modal-selbst, obwohl es tabindex="-1".

Ich bin nicht in der Lage zu teilen mein code, aber ein kurzer Blick auf die Bootstrap docs haben mir gesagt, es geschieht auch in Ihrem Beispiel modal. Das problem ist reproduzierbar:

  1. Besuchen http://getbootstrap.com/2.3.2/javascript.html#modals
  2. Öffnen Sie die demo, modale ("Launch Demo Modal" - Taste)
  3. Tab durch die Felder. Verlieren Sie den Fokus nach "änderungen Speichern", bevor es zurück auf die schließen-Schaltfläche.

Setzen diese in der Konsole anmelden, wenn der modalen (oder in der Tat jedes element mit tabindex="-1") den Fokus erhält. 

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

(Es wird auch protokolliert, wenn Sie klicken auf den modal offensichtlich, aber das ist out of scope).

Warum geschieht dies? Wie kann ich dies verhindern? Ist das ein browser-bug, ein bug/feature von Twitter Bootstrap, oder etwas ganz anderes?

InformationsquelleAutor Stephan Muller | 2013-10-04
  1. 10

    Interessant finden. Es scheint sich um irgendeine Art von Fehler oder Verhalten eingeführt durch bootstrap; Sehr merkwürdiges Verhalten für die Registerkarte index -1.

    Hier ist eine Arbeit um die Verwendung von jQuery, die mit der Einstellung einer first und last - id auf der ersten und letzten Registerkarte können Elemente auf den modal.

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

    Beispiel

    http://www.bootply.com/96858

    • Super, danke. Es ist immer eine Schande zu haben, um mit einem workaround vs. wirklich die Lösung des problem, aber das scheint zu funktionieren wie ich es will 🙂
    InformationsquelleAutor Trevor
  2. 0

    sich eigentlich, in die Sie Ihre wichtigsten modal div, können Sie es durch folgenden code

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

    HTML-CODE

     <div id="yourModalId" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
    InformationsquelleAutor rajesh kakawat
  3. 0

    Dank Trevor. Dies ist mein letzter code:

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

    });
    InformationsquelleAutor Canada Wan
Schreibe einen Kommentar