jQuery UI Dialog + ASP.NET文本框+焦点

Problem

I am using jQuery UI dialog to show a dialog box with some ASP.NET textboxes and a button in it. However as jQuery moves the div for the dialog box outside the form I need to re-move it back to the form myself (see this for details why), so that ASP.NET still works. This moving is causing a problem, where the field does not get focus if called.

我正在使用jQuery UI对话框显示一个对话框,其中包含一些ASP.NET文本框和一个按钮。但是,当jQuery移动表单外部的对话框的div时,我需要将其重新移回到表单本身(请参阅此详细原因),以便ASP.NET仍然有效。这种移动导致了一个问题,如果调用该字段不会获得焦点。

If you look at the sample below the line labeled Line B should set the focus, however the line labeled line A breaks that. If I comment out line A it works. No matter where I move line B to (before dialog, line A etc...) it still fails to set focus.

如果您查看下面的示例,标有线B的线应该设置焦点,但是标记为线A的线会打破它。如果我注释掉A行就行了。无论我在哪里移动B线(在对话框,A线等之前......),它仍然无法设置焦点。

By setting focus I mean the cursor is in the text box flashing ready to type.

通过设置焦点我的意思是光标在文本框中闪烁准备输入。

Question how do I set the focus in this scenario?

问我如何在这种情况下设置焦点?

Samples

HTML body sample

HTML正文样本

<body>
<form id="form1" runat="server">
<div id="popup">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>

jQuery sample

        $(document).ready(function() {
        var dlg = $("#popup").dialog();
        /*Line A*/ dlg.parent().appendTo(jQuery("form:first"));
        /*Line B*/ $("#TextBox2").focus();
    });

4 个解决方案

#1

It works in FF but not in IE7. I have figured out 2 work arounds. If you don't reference the textbox by name but by position, or for some reason if you set the focus twice.

它适用于FF但不适用于IE7。我已经找到了两个工作。如果您没有按名称但按位置引用文本框,或者出于某种原因(如果您将焦点设置两次)。

The first:

$("input:text:second").focus();

The second:

$("#TextBox2").focus().focus();

#2

Try using setTimeout("$('#TextBox2').focus();",100);, for dialog and other methods of the jQuery UI sometimes it take few seconds to actually perform the tasks we assign by code.

尝试使用setTimeout(“$('#TextBox2')。focus();”,100);,对于jQuery UI的对话框和其他方法,有时需要几秒钟来实际执行我们通过代码分配的任务。

Hope this helps. This workaround has helped in many of my applications.

希望这可以帮助。这种解决方法在我的许多应用程序中都有所帮助。

#3

I think the problem is that you are moving the popup and calling focus before the dialog is fully created.

我认为问题是你在完全创建对话框之前移动弹出窗口并调用焦点。

Try using the dialog's open event instead:

请尝试使用对话框的打开事件:

$(document).ready(function() {
  $("#popup").dialog({
    open: function(){
      $(this).parent().appendTo(jQuery("form:first"));
      $("#TextBox2").focus();
    }
  });
});

#4

you could also class the text box, as asp.net mangles control ids to avoid naming conflicts.

你也可以对文本框进行分类,因为asp.net会破坏控件ID以避免命名冲突。

$(".mytextbox").focus();

as an example.. this of course defeats the purpose of semantics but semantics dont mix well with webforms.

作为一个例子..这当然违背了语义的目的,但语义不能与webforms很好地融合。

#1