在 Web 用户控件中将焦点设置为子项答案

【问题标题】：Set focus to child in web user control在 Web 用户控件中将焦点设置为子项
【发布时间】：2013-07-31 17:01:34
【问题描述】：

我为电话号码输入创建了一个 Web 用户控件，该控件具有 3 个文本框，分别用于区号、号码和分机号。文本框位于用于定位的表格中，表格位于跨度内。在使用控件的页面中我有<asp:Label ID="Label6" runat="server" AssociatedControlID="uxPhoneNumber">Phone</asp:Label>

我想要做的是在点击相关标签时将焦点设置为区域代码输入。单击标签时 Web 用户控件是否获得焦点，或者我可以更改 ascx 中的 html 以使其有效？我尝试将onfocus() 添加到<span> 标记和<table> 标记，这样我就可以使用javascript 来设置焦点，但不会引发事件。如果我将 onfocus() 事件移动到第一个输入，它会触发并运行我的脚本

这是完整的 ascx 代码。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PhoneNumber.ascx.cs" Inherits="CustomControls.PhoneNumber" %>
<span id="uxPhoneNumberControl" runat="server" style="display: inline-block;" onfocus="setInitialFocus()">
    <asp:Table ID="uxPhoneNumberTable" runat="server">
        <asp:TableRow runat="server">
            <asp:TableCell runat="server">
                <telerik:RadMaskedTextBox ID="uxAreaCode" runat="server" Columns="3" Mask="###" CssClass="span1" Skin="" MaxLength="3"></telerik:RadMaskedTextBox>
            </asp:TableCell>
            <asp:TableCell runat="server">
                <telerik:RadMaskedTextBox ID="uxPhoneNumber" runat="server" Mask="###-####" Skin="" Columns="10" CssClass="input-mini" MaxLength="8"></telerik:RadMaskedTextBox>
            </asp:TableCell>
            <asp:TableCell runat="server">
                <asp:Label ID="uxExtensionLabel" runat="server" Text="Ext." AssociatedControlID="uxExtension" CssClass="controls-label"></asp:Label>
            </asp:TableCell>
            <asp:TableCell runat="server">
                <telerik:RadMaskedTextBox ID="uxExtension" runat="server" Columns="5" Mask="#####" Skin="" CssClass="span1"></telerik:RadMaskedTextBox>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:HiddenField ID="uxPhoneEntity" runat="server" />
</span>

【问题讨论】：

标签： c# asp.net

【解决方案1】：

尝试将 jQuery click 事件附加到 span，然后将焦点设置到输入，如下所示：

$(document).ready(function(){
    $('#uxPhoneNumberControl').on('click',function(){
        $("#InputID").focus();
    });
});

注意：我在focus() 调用中输入了一个通用名称InputID，因为我无法确定您使用什么ID 或类来唯一标识您想要设置焦点的区号输入控件.

【讨论】：

点击 span 时会引发 onclick 事件，这样可以正常工作，但点击页面中的关联标签时不会引发。
@jac - 您是否也将点击事件附加到标签？
不，我依赖于单击标签时的浏览器行为，并且它与具有AssociatedControlID 属性的另一个控件相关联。
找到了，需要将asp:Label的AssociatedControlId设置为userControl:childControl。在我的情况下AssociatedControlId="uxPhoneNumber:uxAreaCode"

【解决方案2】：

您的setInitialFocus() 函数应如下所示：

function setInitialFocus()
{
    var area = document.getElementById("<%=uxAreaCode.ClientID%>");
    area.focus();
    return true;
}

这会定位uxAreaCode 对象并强制它获得焦点。

【讨论】：