In che modo la finestra di dialogo dell'interfaccia utente jQuery disattiva la messa a fuoco sugli input in background?

Question

Quando si apre una finestra di dialogo modale utilizzando l'interfaccia utente di jQuery, si noterà che se si utilizza il tasto Tab, è possibile concentrarsi sui pulsanti della finestra di dialogo, ma tutti gli input esterni alla finestra di dialogo vengono ignorati. Sto cercando di ottenere lo stesso comportamento con jQuery UI Tools Overlay, ma non sono sicuro di come jQuery UI lo sta facendo. Non sembra che l'indice della tabulazione degli elementi sia impostato su -1, e inoltre, fare ciò sarebbe estremamente noioso poiché implicherebbe la ricerca di tutti gli elementi focalizzabili che non fanno parte della finestra di dialogo. Questo non sarebbe molto buono se hai bisogno di automazione. C'è un modo per disabilitare la messa a fuoco di tutti gli elementi della pagina tranne alcuni?

Answer 1

la finestra di widget di effettivamente gestisce l'evento keypress ed esegue il proprio Tab di elaborazione dei tasti. Questa elaborazione ignora gli elementi tabbable al di fuori della finestra di dialogo.

il codice sorgente relativo (linee 286 a 305 nel current version at the time of this post) è:

// prevent tabbing out of modal dialogs 
if (options.modal) { 
    uiDialog.bind('keypress.ui-dialog', function(event) { 
     if (event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 

     var tabbables = $(':tabbable', this), 
      first = tabbables.filter(':first'), 
      last = tabbables.filter(':last'); 

     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    }); 
} 

Si noti che il commento di TrueBlueAussie è giusto, e che il rilascio del widget finestra di dialogo utilizzata per legare alla manifestazione sbagliata. keydown dovrebbe essere usato al posto di keypress:

uiDialog.bind('keydown.ui-dialog', function(event) { 
    // ... 
}); 

Answer 2

Ecco il pezzo di codice che gestisce questo:

// prevent tabbing out of modal dialogs 
this._on(uiDialog, { 
    keydown: function(event) { 
     if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 
     var tabbables = $(":tabbable", uiDialog), 
      first = tabbables.filter(":first"), 
      last = tabbables.filter(":last"); 
     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    } 
});​ 

Sembra jQuery UI aggiunge un filtro (:tabbable) al motore di selezione jQuery e quando il la finestra di dialogo è attiva, consente solo alla scheda di scorrere tra gli elmenti tabbable della modale.

Codice da: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js