modale con tabindex = "- 1" si concentrerà su scheda

Question

Sto lavorando con Twitter Bootstrap in questo momento, e sto incontrando uno strano problema nel tabindex di un modale:

sto cercando di sfoglia gli elementi del modulo all'interno del modale, ma dopo l'ultimo pulsante il focus è scomparso prima di tornare al pulsante di chiusura. Ho aggiunto una riga nella console che registra quale elemento è focalizzato e si è rivelato essere la modale stessa, anche se ha tabindex="-1".

Non riesco a condividere il mio codice, ma una rapida occhiata ai documenti Bootstrap mi ha detto che succede anche nel loro modale di esempio. Il problema è riproducibile:

1. Visita http://getbootstrap.com/2.3.2/javascript.html#modals
2. Aprire la demo modale (pulsante "Avvia Demo modale")
3. Tab attraverso i campi. Perdi lo stato attivo dopo "Salva modifiche" prima che ritorni al pulsante Chiudi.

Mettendo questo in console sarà il login ogni volta che il modale (o di fatto qualsiasi elemento con tabindex="-1") viene attivato.

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

(Lo registra anche quando si fa clic sul modulo, ovviamente, ma è fuori portata).

Perché succede? Come posso evitare questo? Si tratta di un bug del browser, un bug/funzionalità di Twitter Bootstrap o qualcos'altro interamente?

Answer 1

Scoperta interessante. Sembra essere una sorta di bug o comportamento introdotto da bootstrap; Comportamento molto strano per tab index -1.

Ecco un modo per aggirare l'utilizzo di jQuery, che comporta l'impostazione di un id first e last sul primo e sull'ultimo elemento in grado di tabulazione sul modale.

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

Esempio

http://www.bootply.com/96858

Answer 2

in realtà si concentrano nell'andare sul tuo div modale principale, è possibile controllare da sotto il codice

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

CODICE HTML

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