jQuery UI 焦点窃取 [英] jQuery UI Focus Stealing

问题描述

每当我在下面的插入超链接"文本输入中键入内容时，所有单词都会转到其后面的 textarea.确定和取消按钮工作正常，但我无法专注于文本输入.

Whenever I type something in the following Insert Hyperlink text input, all the words are going to textarea behind it. OK and Cancel buttons are working fine but I cannot focus to text input.

我们使用的是 jQuery UI 1.10.1.它与以前版本的 jQuery 1.8.x 配合得很好.

We'are using jQuery UI 1.10.1. It was working nicely with previous version of jQuery which was 1.8.x.

我检查了 jQuery 背后的代码，它在打开模态对话框时调用了以下方法:

I've checked code behind of jQuery and it has the following methods called when opening a Modal Dialog:

_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

推荐答案

我发现的第二个答案是，在下面的代码中，jQuery 将文档绑定到对话框.因此，当我单击所需按钮的 onclick 事件(或您正在处理的任何事件)时取消绑定:

Second answer I've found is that in the following code jQuery binds document to dialog. So when I unbind this when I click on the desired button's onclick event (or whatever event you're handling):

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

这是 jQuery UI 将 _focusTabble() 方法绑定到文档的 focusin.dialog 事件的地方.

This is where jQuery UI binds it _focusTabble() method to focusin.dialog event of document.

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

这篇关于jQuery UI 焦点窃取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！