jQuery UI Focus Stealing

Question

Ogni volta che si digita qualcosa nel seguente inserimento di testo Collegamento ipertestuale, tutte le parole andranno a textarea dietro di esso. I pulsanti OK e Annulla funzionano correttamente ma non riesco a mettere a fuoco l'input di testo.

Usiamo l'interfaccia utente di jQuery 1.10.1. Funzionava bene con la versione precedente di jQuery che era 1.8.x.

Ho controllato codice dietro di jQuery e ha i seguenti metodi chiamati quando si apre una finestra di dialogo modale:

_focusTabbable: function() { 
    // Set focus to the first match: 
    // 1. First element inside the dialog matching [autofocus] 
    // 2. Tabbable element inside the content element 
    // 3. Tabbable element inside the buttonpane 
    // 4. The close button 
    // 5. The dialog itself 
    var hasFocus = this.element.find("[autofocus]"); 
    if (!hasFocus.length) { 
     hasFocus = this.element.find(":tabbable"); 
    } 
    if (!hasFocus.length) { 
     hasFocus = this.uiDialogButtonPane.find(":tabbable"); 
    } 
    if (!hasFocus.length) { 
     hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); 
    } 
    if (!hasFocus.length) { 
     hasFocus = this.uiDialog; 
    } 
    hasFocus.eq(0).focus(); 
}, 

_keepFocus: function (event) { 
    function checkFocus() { 
     var activeElement = this.document[0].activeElement, 
      isActive = this.uiDialog[0] === activeElement || 
       $.contains(this.uiDialog[0], activeElement); 
     if (!isActive) { 
      this._focusTabbable(); 
     } 
    } 
    event.preventDefault(); 
    checkFocus.call(this); 
    // support: IE 
    // IE <= 8 doesn't prevent moving focus even with event.preventDefault() 
    // so we check again later 
    this._delay(checkFocus); 
}, 

che è preso da qui: http://code.jquery.com/ui/1.10.1/jquery-ui.js

Answer 1

seconda risposta che ho trovato è che nel seguente codice jQuery si lega documento alla finestra di dialogo. Così, quando ho UNBIND questo quando clicco su eventi del pulsante desiderato onclick (o qualsiasi evento che stai gestione):

if (window.jQuery && window.jQuery.ui.dialog) { 
    $(document).unbind("focusin.dialog"); 
} 

Questo è dove jQuery UI lo lega _focusTabble() metodo per focusin.dialog caso di documento.

if (!$.ui.dialog.overlayInstances) { 
      // Prevent use of anchors and inputs. 
      // We use a delay in case the overlay is created from an 
      // event that we're going to be cancelling. (#2804) 
      this._delay(function() { 
       // Handle .dialog().dialog("close") (#4065) 
       if ($.ui.dialog.overlayInstances) { 
        this.document.bind("focusin.dialog", function(event) { 
         if (!$(event.target).closest(".ui-dialog").length && 
           // TODO: Remove hack when datepicker implements 
           // the .ui-front logic (#8989) 
           !$(event.target).closest(".ui-datepicker").length) { 
          event.preventDefault(); 
          $(".ui-dialog:visible:last .ui-dialog-content") 
           .data("ui-dialog")._focusTabbable(); 
         } 
        }); 
       } 
      }); 
     } 

Answer 2

Quello che ho ha fatto per risolvere questo problema è quello di commentare questo $(".ui-dialog:visible:last .ui-dialog-content").data("ui-dialog")._focusTabbable();

È possibile trovare il co completo de sotto:

if (!$.ui.dialog.overlayInstances) { 
     // Prevent use of anchors and inputs. 
     // We use a delay in case the overlay is created from an 
     // event that we're going to be cancelling. (#2804) 
     this._delay(function() { 
      // Handle .dialog().dialog("close") (#4065) 
      if ($.ui.dialog.overlayInstances) { 
       this.document.bind("focusin.dialog", function(event) { 
        if (!$(event.target).closest(".ui-dialog").length && 
          // TODO: Remove hack when datepicker implements 
          // the .ui-front logic (#8989) 
          !$(event.target).closest(".ui-datepicker").length) { 
         event.preventDefault(); 
         //$(".ui-dialog:visible:last .ui-dialog-content") 
          //.data("ui-dialog")._focusTabbable(); 
        } 
       }); 
      } 
     }); 
    } 

Answer 3

Ho avuto un problema simile in cui avevo bisogno di messa a fuoco per essere all'interno del contenuto della mia finestra di dialogo (per WCAG). Utilizzando messa a fuoco() da solo fallito, quindi ciò che la mia soluzione finale è stato nella finestra di esemplificazione ho aggiunto:

focus: function(event, ui) { 
        setTimeout(function(){ 
         $('#element').blur().focus().css({'color': '#000', 'text-decoration' : 'none', 'cursor' : 'default'}); 
        }, 500); 
       } 

ho usato il timeout per garantire la compatibilità. * Nota, ho reso '#element' un tag di ancoraggio (elemento interattivo) in modo che l'attenzione si sarebbe concentrata. Questa è la ragione per lo styling.

Questo codice dovrebbe poter essere aggiunto anche alla funzione "open" della finestra di dialogo jQuery.