jQuery UI聚焦竊取

每當我在下面的插入超鏈接文本輸入中輸入內容時，所有單詞都將以textarea作爲它的後面。確定和取消按鈕工作正常，但我無法專注於文本輸入。jQuery UI聚焦竊取

我們使用jQuery UI 1.10.1。它與以前版本的jQuery 1.8.x很好地協作。

enter image description here

我檢查代碼的jQuery的背後，它有以下幾種方法打開一個模式對話框時調用：

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

是從這裏取：http://code.jquery.com/ui/1.10.1/jquery-ui.js

來源

2013-03-27 Tarik

有趣...我有一個與垂直內容的滾動對話框中的錨標籤類似的問題。如果向下滾動並單擊對話框中的任意位置，焦點將滾動回到對話框中最上面的錨點標記。我已經將它追溯到你所引用的代碼，但我不願意評論那些代碼......我也不應該......我覺得解綁是骯髒的。 – incutonez

這是jQuery UI中的一個錯誤：http://bugs.jqueryui.com/ticket/9101。應該在下一個版本中修復。 – Noyo

該錯誤在jQuery UI 1.11.0中修復。這是我正在運行的版本，但我仍然觀察到這個問題。 –

第二個答案，我發現是，在下面的代碼jQuery的綁定文件對話框。所以，當我拆散這個當我點擊所需的按鈕的onclick事件（或任何事件中，你正在處理）：

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

這是jQuery用戶界面結合它_focusTabble()方法focusin.dialog事件的文件。

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(); 
         } 
        }); 
       } 
      }); 
     }

來源

2013-03-28 15:27:47 Tarik

這對我很好。在開啓JavaScript SpellChecker之前，我立即執行您在頂部張貼的一小段代碼......現在焦點工作正常。在jquery對話框之前竊取焦點。但是，我只是想知道，如果通過刪除這個jQuery放置的事件處理程序，我們會導致某些事情中斷！ – ClearCloud8

應該在jQuery UI 1.11.0中修復：http://bugs.jqueryui.com/ticket/9101。 – Noyo

我解決這個問題的辦法是將此註釋掉$(".ui-dialog:visible:last .ui-dialog-content").data("ui-dialog")._focusTabbable();

你可以找到完整的公司德如下：

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(); 
        } 
       }); 
      } 
     }); 
    }

來源

2013-03-27 17:56:19 Tarik

我有地方，我需要重點是（對於WCAG）我的對話框的內容中類似的問題。使用對焦（）單獨失敗了，我說有啥我的最終解決辦法是在對話框實例：

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

我使用的超時，以確保兼容性。 *請注意，我將'#element'作爲錨點標記（交互式元素），以便重點關注。這是造型的原因。

此代碼應該能夠被添加到jQuery對話框的「打開」功能中。

來源

2017-07-05 14:15:40 Bren1818

jQuery UI聚焦竊取

回答

相關問題