Modal z TabIndex = „- 1” dostaje skupić się na karcie

Question

pracuję z Twitter Bootstrap w tej chwili, a ja napotykają dziwny problem w TabIndex z modalnego:

Próbuję przejrzyj elementy formularza wewnątrz modalu, ale po ostatnim przycisku fokus zniknął przed powrotem do przycisku zamykania. Dodałem linię w konsoli, która rejestruje, który element jest skupiony, i okazał się być samym modalem, mimo że ma tabindex="-1".

Nie mogę udostępnić mojego kodu, ale szybkie sprawdzenie dokumentacji Bootstrap powiedziało mi, że dzieje się tak również w ich przykładowym modalu. Problemem jest odtwarzalny:

1. Odwiedź http://getbootstrap.com/2.3.2/javascript.html#modals
2. Otwórz modalne demo ("Uruchom Demo Modal" przycisk)
3. Tab przez pola. Stracisz ostrość po "Zapisz zmiany", zanim wróci do przycisku zamykania.

Umieszczenie tego w konsoli rejestruje się, gdy modalny (lub w rzeczywistości jakikolwiek element z tabindex="-1") zyskuje ostrość.

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

(Loguje się również po kliknięciu modalu, ale jest to poza zakresem).

Dlaczego tak się dzieje? Jak mogę temu zapobiec? Czy jest to błąd przeglądarki, błąd/funkcja Twitter Bootstrap, czy coś zupełnie innego?

Answer 1

Interesujące znalezisko. Wydaje się, że jest to jakiś błąd lub zachowanie wprowadzone przez bootstrap; Bardzo dziwne zachowanie dla indeksu kart -1.

Oto jedna z prac związanych z jQuery, która polega na ustawieniu identyfikatora first i last na pierwszych i ostatnich elementach tabulacji modalu.

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

Przykład

http://www.bootply.com/96858

Answer 2

faktycznie skupić się dzieje na głównej modalne div, można sprawdzić to poniżej kod

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

kod HTML

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