jQuery UI的焦点被盗(jQuery UI Focus Stealing)

每当我键入以下插入超链接文本输入的东西，所有的话都将textarea后面。 确定和取消按钮都工作正常，但我不能专注于文本输入。

We'are使用jQuery UI 1.10.1。 它使用jQuery的先前版本这是1.8.x.工作很好

我检查代码的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

Answer 1:

第二个答案，我发现是，在下面的代码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();
                        }
                    });
                }
            });
        }

Answer 2:

我做了什么来解决这个问题是注释掉这个$(".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();
                    }
                });
            }
        });
    }

Answer 3:

我有地方，我需要重点是（对于WCAG）我的对话框的内容中类似的问题。 使用对焦（）单独失败了，所以我什么端到端的解决方案是我加的对话框实例：

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

我使用的超时，以确保兼容性。 *注意，我做了“#element”锚标记（交互式元素）所以重点将采取。 这是造型的原因。

此代码应该能够被添加到jQuery的对话框的“打开”功能以及。

文章来源: jQuery UI Focus Stealing