jQuery UI Focus Kradzież

Question

Zawsze, gdy wpiszesz coś w poniższym polu tekstowym Wstaw hiperłącze, wszystkie słowa będą za nim textarea. Przyciski OK i Anuluj działają poprawnie, ale nie mogę ustawić ostrości na wprowadzanie tekstu.

Używamy jQuery UI 1.10.1. Dobrze działało z poprzednią wersją jQuery, która wynosiła 1.8.x.

Sprawdziłem kod za jQuery i ma następujące metody zwane kiedy otwarcie modalnego okna dialogowego:

_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); 
}, 

że pochodzi stąd: http://code.jquery.com/ui/1.10.1/jquery-ui.js

Answer 1

Druga odpowiedź znalazłem jest to, że w poniższym kodzie jQuery wiąże dokument do okna. Kiedy więc rozwiązać ten po kliknięciu na zdarzeniu onclick odpowiedni przycisk (lub cokolwiek zdarzeń jesteś obsługi):

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

To gdzie jQuery UI wiąże się to _focusTabble() metoda focusin.dialog przypadku dokumentu.

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

Co ja rozwiązałem ten problem, aby skomentować to: $(".ui-dialog:visible:last .ui-dialog-content").data("ui-dialog")._focusTabbable();

Możesz znaleźć kompletny de poniżej:

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

Miałem podobny problem, gdy potrzebowałem koncentracji, aby znaleźć się w treści mojego okna dialogowego (dla WCAG). Korzystanie ostrość() sam nie powiodła się, więc co moje rozwiązanie koniec był w instancji dialogowym I dodaje:

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

użyłem limit czasu, aby zapewnić kompatybilność. * Zauważ, że zrobiłem "#element" jako znacznik zakotwiczenia (element interaktywny), aby skupienie się zajęło. To jest powód stylizacji.

Ten kod powinien również zostać dodany do funkcji "Otwórz" w oknie dialogowym jQuery.