在 ASP.NET 页面用户控件上使用 jQuery 设置输入字段焦点答案

【问题标题】：setting input field focus using jQuery on ASP.NET page user control在 ASP.NET 页面用户控件上使用 jQuery 设置输入字段焦点
【发布时间】：2011-08-25 16:36:44
【问题描述】：

如何使用 jQuery 将焦点设置在此页面的 TxtPassword 输入字段上？ TxtPassword 输入字段位于 SaveCancelDelete 用户控件中。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="BatchDetails.aspx.vb"
    Inherits="Acu.UI.Web.AccessioningBatchDetails" MasterPageFile="~/Master" %>

<%@ Register TagPrefix="uc1" TagName="SaveCancelDelete" Src="/SecurityDisplay/SaveCancelDelete.ascx" %>
<%@ Register TagPrefix="uc1" TagName="BatchEditor" Src="BatchEditor.ascx" %>
<%@ Register TagPrefix="uc1" TagName="PageHTMLTop" Src="/PageHTMLTop.ascx" %>
<%@ Register TagPrefix="uc1" TagName="PageHTMLRight" Src="/PageHTMLRight.ascx" %>
<%@ Register TagPrefix="uc1" TagName="AccessioningHTMLLeft" Src="/Accessioning/AccessioningHTMLLeft.ascx" %>
<%@ Register TagPrefix="uibox1" Namespace="Acu.UI.Web" Assembly="Acu.UI.Web" %>

<asp:Content runat="server" ID="headcontent" ContentPlaceHolderID="head">
</asp:Content>
<asp:Content runat="server" ID="bodycontent" ContentPlaceHolderID="body">
    <uc1:PageHTMLTop id="PageHTMLTop" runat="server" />
    <uibox1:UIBox ID="BxWizardTitle" runat="server" Width="100%">
        <uc1:AccessioningHTMLLeft id="AccessioningHTMLLeft" title="Accessioning Dashboard"
            runat="server" />
        <uc1:BatchEditor ID="BatchEditor" runat="server" />
        <uc1:PageHTMLRight id="PageHTMLRight" runat="server" />
    </uibox1:UIBox>
    <uc1:SaveCancelDelete id="SaveCancelDelete" runat="server" />

    <script type="text/javascript">

    jQuery(document).ready(function() {
        //jQuery('#<%=TxtPassword.ClientID %>').focus();  
        //jQuery("#ctl00_body_SaveCancelDelete_TxtPassword").focus();
    });

    </script>

</asp:Content>

【问题讨论】：

标签： jquery asp.net focus ascx

【解决方案1】：

[name$=""] 选择器搜索名称以引号中指定的任何内容结尾的控件。

$('input[name$="TxtPassword"]').focus();

【讨论】：

我喜欢这个答案.. 效果很好。但是，我有两个用户控件.. 两者都有相同的 id。我将如何处理？
$('input[name$="TxtPassword"]:first').focus(); 会关注第一个匹配选择器的。
我的意思是 BatchEditor 用户控件有一个 ID 为 TxtPassword 的输入字段，而 SaveCancelDelete 用户控件也有一个 ID 为 TxtPassword 的输入字段。因此，当呈现给浏览器时，完全限定的 id 是不同/唯一的。
我明白了。但是，您不能同时关注它们。通过上面的脚本，您希望专注于页面加载。即使他们每个人都有不同的渲染客户端名称，它仍然可以工作。

【解决方案2】：

使用属性 contains(*=) 选择器。

jQuery(document).ready(function() {
    jQuery("input[id*='TxtPassword']", $("[id*='SaveCancelDelete'")).focus();  
});

【讨论】：

TxtPassword.ClientID 将被 jQuery 逐字解释。我不认为你的意思是包含.ClientID。
@Justin - 感谢您指出这一点，我不打算添加它。修改了我的答案。
如果有两个控件，每个控件都有一个 ID 为“TxtPassword”的输入字段，我该怎么做？
另外，请看我的回答； $= 而不是 *= 理论上会消除其 id 中包含该 id 的对象。（即txtPassword 和txtPassword2）
@Mr. MacGyver，如果您的意思是 TxtPassword 包含在 id 中（即 txtPassword 和 txtPassword2），请查看我的答案。但是您不能有两个具有完全相同 id 的控件。

【解决方案3】：

您需要 uc1:SaveCancelDelete 上的一个属性，该属性为您提供密码控件的客户端 ID，因为您需要它。另一方面，如果密码字段是用户控件的可见属性，您可以使用服务器端代码从您的代码隐藏中调用SaveCancelDelete.PasswordInputControl.Focus();。

【讨论】：

我需要使用 jQuery，因为 Google Chrome 对样式很挑剔。我在 .focus 期间正在做一些特定的 CSS 样式，需要在 jQuery 中完成，否则我的背景颜色不会改变。您可以查看我以前的帖子了解更多详细信息。不过，我给了你 +1 的答案。