Question

我在强制关注JQuery对话框内容的文本字段时出现问题，该内容是动态生成的。我已经google了这一点，似乎如果Jquery对话框设置为模态，JQuery“窃取”文档级别的焦点。说实话，我真的不明白这意味着什么：P但如果有人对我的问题有任何解决方法，我们将不胜感激。下面是我的Jquery对话框的代码片段。

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

Answer 1

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

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

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

Answer 2

在我遇到的一个案例中，结果发现有问题的输入字段已被其他代码禁用。

如果是这种情况，请删除禁用的属性，如下所示：

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

...或者避免停用相关的表单字段。

专注于文本字段在JQuery对话框内容不起作用

2 个答案: