Set focus to child in web user control

Question

I've created a web user control for phone number entry that has 3 text boxes for the area-code, number, and extension. The text boxes are in a table for positioning and the table is inside a span. In the page that uses the control I have <asp:Label ID="Label6" runat="server" AssociatedControlID="uxPhoneNumber">Phone</asp:Label>

What I want to do is set the focus to the area-code input when the associated label is clicked on. Does the web user control get the focus when the label is clicked, or can I change the html in the ascx so this works? I have tried adding onfocus() to the <span> tag, and the <table> tag so I can use a javascript to set the focus, but the event is not raised. If I move the onfocus() event to the first input it fires and my script runs

Here is the complete ascx code.

<%@ 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

Try attaching a jQuery click event to the span and then setting focus to the input, like this:

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

Note: I have put a general name of InputID in the focus() call, because I am not able to tell what ID or class you are using to uniquely identify the area code input control you want to set focus towards.

Answer 2

Your setInitialFocus() function should look something like this:

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

This locates the uxAreaCode object and forces it to take focus.