我在强制关注动态生成的JQuery对话框内容中的文本字段时遇到问题。我在谷歌上搜索过这一点,似乎如果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();
},
我认为更多的是关于内容何时添加到模态对话框。确保对话框已成功加载后,请尝试将焦点设置在文本字段上:
$('some selector').dialog({
bgiframe: true,
open: function() {
$('./*your element*/'.focus();
},
beforeclose: function(event, ui) { /* your code */ }
});
这将确保只在打开对话框后尝试执行聚焦。
在一个案例中,有问题的输入字段被其他代码禁用了。
如果是这种情况,请删除禁用的属性,如下所示:
jQuery('#<form-id>').dialog({
open: function(event, ui) {
jQuery('#<input-id>').removeAttr('disabled').focus();
}
});
或者避免禁用有问题的表单字段。