专注于 JQuery 对话框内容中的文本字段不起作用答案

【问题标题】：Focus On Textfield In JQuery Dialog Content Not Working专注于 JQuery 对话框内容中的文本字段不起作用
【发布时间】：2012-02-06 12:10:30
【问题描述】：

我在强制关注动态生成的 JQuery 对话框内容中的文本字段时遇到问题。我对此进行了谷歌搜索，似乎如果将 Jquery 对话框设置为模式，则 JQuery 在文档级别“窃取”焦点。老实说，我真的不明白这意味着什么：P 但如果有人对我的问题有任何解决方法，我们将不胜感激。下面是我的 Jquery 对话框的代码 sn-ps。

    $.post(URI, Params, function(data){
    $("<div id='MyModal'></div>").html(data).dialog({
        show: "blind",
        width:1000,
        height:600,
        title:"My Modal",
        resizable: false,
        modal: true,
        draggable:false,
        position:['center','center'],
        buttons: {
            "Close": function() { 
                //window.console.log('Close button clicked');
                $(this).dialog("close");
            }, 
        },

        // Onclose callback
        close:function(){
            // Close modal
                            CloseDiaryModal();
        }
        // End onclose callback
    })
    // Add styling to button widgets
    .dialog("widget")
    .find(".ui-dialog-buttonset").css({'float': 'left', 'width': '100%'}).end()
    .find(".ui-dialog-buttonset button")
    .eq(0).css({'float': 'left', 'margin-left': '10px'}).end()
    .eq(0).attr('id', 'CloseBtn').end()
})
.complete(function() {      
            // Set focus
    $("#SearchField").focus();
}); 
// End modal function

我已尝试添加以下选项，但仍然无法正常工作。 ATM，您可以看到光标闪烁约 1 秒，然后失去焦点。无法弄清楚为什么会这样。谢谢，希望有人可以帮助我。

focus:function(event, ui) { 
        $("#SearchLastName").focus(); 
},
open:function(event, ui) { 
    $('#SearchLastName').focus(); 
},

【问题讨论】：

标签： jquery jquery-ui-dialog setfocus

【解决方案1】：

我认为它更多地是关于何时将内容添加到模式对话框中。确保对话框已成功加载后，尝试将焦点设置在文本字段上：

$('some selector').dialog({
    bgiframe: true,
    open: function() { 
       $('./*your element*/'.focus();
    },
    beforeclose: function(event, ui) { /* your code */ }
});

这将确保仅在已打开对话框后尝试执行焦点。

【讨论】：

您发布此内容时可能错过了我的最后一次编辑。无论如何，正如您在我编辑的问题中看到的那样，我尝试了“打开”和“焦点”这两个选项，并且我确实尝试在 POST 事件“完成”中添加设置的焦点代码，但没有任何效果。就像我说的那样，您可以看到光标闪烁几秒钟，然后失去焦点。
我以前从未使用过jsfiddle.net，也不知道如何使用它。加上原始代码对我来说非常复杂，无法知道要在 jsfiddle.net 中提取哪些部分。你还有什么可以帮助我的吗？
open:function() {} 方法在我在 js fiddle 上的隔离测试用例中运行良好：jsfiddle.net/heu7h
昨天，我将我的 JQuery 从 1.5.1 升级到 1.7.1，并没有考虑太多焦点问题，因为我几乎尝试了所有方法。大约一个小时前，我正在测试一些东西，我注意到焦点正在起作用，即。焦点设置在文本字段上。无法确认，但升级到 1.7.1 似乎可以解决。我知道有些人可能会认为这可能是缓存问题，并且我正在使用缓存页面或其他东西，但我总是在每次代码更改后重新加载页面，即。 CTRL+F5 和清除浏览器缓存/临时文件的东西。无论如何，感谢所有的帮助。

【解决方案2】：

在我遇到的一种情况下，有问题的输入字段已被其他代码禁用。

如果是这种情况，请像这样删除 disabled 属性：

jQuery('#<form-id>').dialog({
    open: function(event, ui) {
        jQuery('#<input-id>').removeAttr('disabled').focus();
    }
});

...或避免禁用有问题的表单域。

【讨论】：