Question

This是迄今为止我发现的唯一相关帖子，不是我的确切问题，而是关闭。

如果我将焦点放在我页面上的第一个文本框中，然后反复按TAB直到我到达页面上的最后一个控件，那么Tab键顺序可以正常运行，每个控件都以正确的顺序聚焦。

但是...

如果我实际填写表单并在任何下拉列表中选择一个值，当我在选择值后按TAB键时，焦点将放在我页面上的第一个文本框中，而不是在所述下拉列表之后的下一个控件。

我创建了一个包含标签，下拉列表和图像按钮的控件，因为在我的应用程序中多次使用此列表。控件如下所示：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="OrganizationList.ascx.cs" Inherits="MyApp.Web.Controls.OrganizationList" %>
<%@ Register src="UpdateProgress.ascx" tagname="UpdateProgress" tagprefix="uc1" %>
<%@ Register src="Address.ascx" tagname="Address" tagprefix="uc2" %>

<asp:UpdatePanel ID="OrganizationUpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>

        <div style="margin: 0px;">
            <div class="label"><asp:Label ID="Prompt" runat="server"></asp:Label>:</div>
            <div class="field"><asp:DropDownList ID="Organizations" runat="server" Width="205" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList>&nbsp;<asp:ImageButton id="AddOrganization" runat="server" ImageAlign="AbsMiddle" ToolTip="Add a new organization" onclick="AddOrganization_Click" /></div>
        </div>

        <asp:HiddenField ID="DummyButton" runat="server" />
        <ajax:ModalPopupExtender ID="AddOrganizationModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" CancelControlID="Cancel" DropShadow="true" PopupControlID="NewOrganization" RepositionMode="RepositionOnWindowResizeAndScroll" TargetControlID="DummyButton"></ajax:ModalPopupExtender>
        <asp:Panel ID="NewOrganization" runat="server" CssClass="modalPopUp" Width="500">
            <asp:Panel ID="OrganizationModalContent" runat="server" CssClass="modalContent" GroupingText="Add Organization" style="text-align: left; vertical-align: top;" Width="490">
                <table border="0" cellpadding="2" cellspacing="0" width="100%">
                    <tr><td colspan="2"><asp:ValidationSummary ID="OrganizationValidationSummary" runat="server" CssClass="ValidationSummary" ValidationGroup="NewOrg" /></td></tr>
                    <tr><td class="label"><asp:RequiredFieldValidator ID="NameRequired" runat="server" ControlToValidate="Name" Display="Dynamic" ErrorMessage="Please provide the organization's name." SetFocusOnError="true" ValidationGroup="NewOrg">*</asp:RequiredFieldValidator>Organization Name:</td>
                        <td><asp:TextBox ID="Name" runat="server" MaxLength="100" Width="200"></asp:TextBox></td></tr>
                    <tr><td class="label"><asp:RequiredFieldValidator ID="PhoneRequired" runat="server" ControlToValidate="Phone" Display="Dynamic" ErrorMessage="Please provide the organization's phone number." SetFocusOnError="true" ValidationGroup="NewOrg">*</asp:RequiredFieldValidator>Phone:</td>
                        <td><ajax:MaskedEditExtender ID="PhoneMaskedEditExtender" runat="server" ClearTextOnInvalid="true" InputDirection="LeftToRight" Mask="(999)999-9999" MaskType="Number" MessageValidatorTip="true" PromptCharacter="_" TargetControlID="Phone"></ajax:MaskedEditExtender>
                            <asp:TextBox ID="Phone" runat="server" MaxLength="10" Width="200"></asp:TextBox></td></tr>
                    <tr><td class="label">Fax:<br />(optional)</td>
                        <td><ajax:MaskedEditExtender ID="FaxMaskedEditExtender" runat="server" ClearTextOnInvalid="true" InputDirection="LeftToRight" Mask="(999)999-9999" MaskType="Number" MessageValidatorTip="true" PromptCharacter="_" TargetControlID="Fax"></ajax:MaskedEditExtender>
                            <asp:TextBox ID="Fax" runat="server" MaxLength="10" Width="200"></asp:TextBox></td></tr>
                    <tr><td colspan="2"><uc2:Address ID="Address" runat="server" /></td></tr>
                    <tr><td colspan="2" style="text-align: right;"><asp:HiddenField ID="TypeOfList" runat="server" /><asp:Button ID="Submit" runat="server" CausesValidation="true" Text="Submit" onclick="Submit_Click" ValidationGroup="NewOrg" /><asp:Button ID="Cancel" runat="server" Text="Cancel" /></td></tr>
                </table>
            </asp:Panel>
        </asp:Panel>

    </ContentTemplate>
</asp:UpdatePanel>
<uc1:UpdateProgress ID="OrganizationUpdateProgress" runat="server" AssociatedUpdatePanelId="OrganizationUpdatePanel" />

这是我控件上的TabIndex属性：

public short TabIndex
{
    get { return Organizations.TabIndex; }
    set { Organizations.TabIndex = value; AddOrganization.TabIndex = (short)(value + 1); }
}

这是父页面上控件的引用之一：

<uc3:OrganizationList ID="ReportedBy" runat="server" FieldLabel="Reported By" ListType="ReportedBy" TabIndex="105" />

不确定您可能想要/需要看到的其他内容。

浏览器：IE8，IE9，IE10，FF 29.0.1

我们在9以上的IE版本中遇到了一些问题，所以我添加了一个HTTP响应标头来模拟IE9

enter image description here

我的用户声称他们主要使用TAB在我的应用中导航，因此这实际上是一个比我预期更高优先级的错误。我不知道为什么一旦选择了值就忽略了TabIndex。

非常感谢任何想法。

更新

我有一个下拉列表，它只是一个开箱即用的下拉列表，而不是用户控件。那个工作正常。我可以在该列表中选择一个值，然后按TAB键，焦点移动到下一个控件。那么，任何人都可以帮助我找出导致此错误的用户控件的“错误”吗？

Answer 1

这两个帖子帮助我弄清楚我需要做什么：

我在我的控件中的DropDownList中添加了一个SelectedIndexChanged事件处理程序，并将焦点设置回DropDownList。这是代码：

protected void Organizations_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList ddl = (DropDownList)sender;
    ScriptManager scriptMgr = ScriptManager.GetCurrent(Page);
    scriptMgr.SetFocus(ddl);
}

这里是.aspx页面上的控件：

<asp:DropDownList ID="Organizations" runat="server" Width="205" OnSelectedIndexChanged="Organizations_SelectedIndexChanged" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList>

2014.05.22更新：

在我的自定义控件中，我有一个名为AddOrganization的图像按钮（+）。在昨天测试修复时，我们发现如果用户点击了＆＃39; +＆＃39;添加新组织...在他们保存组织后...新值将自动选择（按预期），但标签将再次重置。所以我不得不修改我的按钮点击事件处理程序：

protected void Submit_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        // Do stuff...save organization

        // update the list
        BindOrganizationList();
        // select the new value
        Organizations.SelectedIndex = Organizations.Items.IndexOf(Organizations.Items.FindByText(OrganizationName.Text.ToUpper().Trim()));
        // reset the form
        ResetOrganizationForm();
        OrganizationUpdatePanel.Update();
        // set focus back to the dropdownlist
        ScriptManager scriptMgr = ScriptManager.GetCurrent(Page);
        scriptMgr.SetFocus(Organizations);
    }
    else
    {
        // Display friendly validation messages to user
    }
}

通过更新面板回发重置TabIndex？

1 个答案: