编辑器 - “插入链接”对话框中的输入元素无法获得焦点答案

【问题标题】：Redactor - input elements in "insert link" dialog cannot get focus编辑器 - “插入链接”对话框中的输入元素无法获得焦点
【发布时间】：2014-12-17 10:48:52
【问题描述】：

我正在尝试做类似于this page 正在做的事情。

唯一的区别是我使用的 jQuery UI 对话框是模态的。

我尝试在页面中编辑脚本以使 jQuery UI 对话框成为模态。

$("#dialog-modal").dialog(
{
    modal: true, // added this line to make dialog modal
    width: 600,
    height: 400,
    open: function(event, ui)
    {
        var textarea = $('<textarea style="height: 276px;">');
        $(textarea).redactor({
            focus: true,
            maxHeight: 300,
            initCallback: function()
            {
                this.code.set('<p>Lorem...</p>');
            }
        });
    }
 });

然后我点击了插入链接按钮（工具栏右侧的第三个按钮）。这显示了另一个带有表单的 jQuery UI 模式对话框。

我注意到我无法获得文本字段的焦点。我无法在其中输入任何内容。

如果我不将第一个对话框设为模态，代码可以正常工作。

知道如何规避这个问题吗？

【问题讨论】：

标签： jquery-ui jquery-ui-dialog redactor redactor.js

【解决方案1】：

我遇到了同样的问题。此行为是 jQuery UI 处理文档上的 focusin.dialog 事件并将焦点放回堆栈中的最后一个 jQuery UI 对话框（使用选择器 ".ui-dialog:visible:last"）的结果。我在创建模态对话框后立即调用此代码解决了这个问题：

setTimeout(function() {
    $(document).unbind("focusin.dialog");
}, 100);

我使用了setTimeout，因为jQuery UI 也使用setTimeout 来绑定这个事件。由于这个答案，我能够修复它：jQuery UI Focus Stealing。我也尝试升级到 jQuery UI 1.11.4，但这并没有解决问题。

【讨论】：