关注 JQuery 对话框内容中的文本字段不起作用
我在强制关注动态生成的 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();
},
I am having problem forcing focus on a textfield in the content of a JQuery dialog content, which is dynamically generated. I have googled about this and it seems that if the Jquery dialog is set as modal, JQuery "steals" the focus at the document level. To be honest, I don't really understand what that means :P but if anyone have any workaround to my problem, it will be appreciated. Below are the code snippets of my Jquery dialog.
$.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
I have tried adding the following options but its still not working. ATM, you can see the cursor blinking for about 1 sec and then it loses focus. Can't figure out why this is happening. Thanks and hope someone can help me with this.
focus:function(event, ui) {
$("#SearchLastName").focus();
},
open:function(event, ui) {
$('#SearchLastName').focus();
},
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我认为更多的是关于何时将内容添加到模式对话框中。
确保对话框已成功加载后,尝试将焦点设置在文本字段上:
这将确保仅在打开对话框后尝试执行焦点。
I think its more about when the content is added to the modal dialog.
Try setting focus on the text field after you've made sure the dialog has successfully loaded:
This will make sure to only try to perform the focus after already opening the dialog.
在我遇到的一种情况下,事实证明有问题的输入字段已被其他代码禁用。
如果是这种情况,请像这样删除禁用属性:
...或避免禁用有问题的表单字段。
In one case I had, it turned out that the input field in question had been disabled by other code.
If this is the case, either remove the disabled attribute like so:
...or avoid disabling the form field in question.