在Web用户控件中将焦点设置为子级

Question

我创建了一个用于电话号码输入的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>

Answer 1

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

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

注意：我在focus()调用中输入了InputID的通用名称，因为我无法告诉您使用什么ID或类来唯一地标识您要设置焦点的区域代码输入控件。

Answer 2

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

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

这将定位uxAreaCode对象并强制其聚焦。