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点击事件附加到范围，然后将焦点设置为输入，如下所示：

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

注意：我在InputID调用中添加了focus()的通用名称，因为我无法分辨您使用的ID或类来唯一标识您想要的区号输入控件把重点放在。

Answer 2

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

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

这将找到uxAreaCode对象并强制它成为焦点。

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

2 个答案: