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聚焦窃取

回答

相关问题