jQuery UI 对话框 + ASP.NET 文本框 + 焦点

Posted

技术标签:

【中文标题】jQuery UI 对话框 + ASP.NET 文本框 + 焦点【英文标题】:jQuery UI Dialog + ASP.NET textboxes + focus 【发布时间】:2010-10-20 20:36:59 【问题描述】:

问题

我正在使用 jQuery UI 对话框来显示一个对话框,其中包含一些 ASP.NET 文本框和一个按钮。但是,当 jQuery 将对话框的 div 移到表单之外时,我需要自己将其重新移回表单(有关详细信息,请参阅this),这样 ASP.NET 仍然可以工作。这种移动导致了一个问题,即如果调用该字段,则不会获得焦点。

如果您查看下面的示例,标有 B 行的行应该设置焦点,但是标有 A 行的行打破了这一点。如果我注释掉 A 行,它会起作用。无论我将 B 行移动到何处(在对话框、A 行等之前),它仍然无法设置焦点。

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

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

样本

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 示例

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

【问题讨论】:

查看我的解决方案以防止在 jQuery UI 对话框中跳转焦点 http://***.com/a/9428501/1230428 祝你好运 【参考方案1】:

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

希望这会有所帮助。这种解决方法对我的许多应用程序都有帮助。

【讨论】:

工作,但不得不将我的超时时间提高到 500。谢谢【参考方案2】:

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

尝试改用对话框的open 事件:

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

【讨论】:

到目前为止,这适用于我在 Ubunutu Firefox 10.0.2 和 IE 6 中。谢谢。【参考方案3】:

它在 FF 中有效,但在 IE7 中无效。我想出了2个解决方法。如果您不按名称而是按位置引用文本框,或者由于某种原因您设置了两次焦点。

第一个:

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

第二个:

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

【讨论】:

【参考方案4】:

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

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

作为一个例子..这当然违背了语义的目的,但语义不能很好地与网络表单混合。

【讨论】:

以上是关于jQuery UI 对话框 + ASP.NET 文本框 + 焦点的主要内容,如果未能解决你的问题,请参考以下文章

asp.net 中的 jQuery UI 对话框和 Ajax POST

jquery ui dialog 内部使用asp.net控件

jQuery ui对话框中的Asp.net ajax自动完成功能不起作用

带有 ASP.NET 回发的 jQuery 模态对话框

发生带有 Jquery 对话框的邮箱时,asp.net 文本框值为空

Three steps to use jQuery UI in ASP.NET MVC 5