1

我有一个用户控件,它有两个下拉列表、四个文本框和一个按上述顺序排列的网格视图。我希望焦点在按下 Tab 键时按此顺序移动。

我按顺序设置了每个控件的 tabindex 属性(1005、1010、1015 ...),但其 tabindex 属性未设置为任何内容的 gridview 除外。

在 page_load 我将焦点设置到第一个下拉列表。

加载页面后,焦点会根据需要位于第一个下拉列表上。然后,当按下选项卡时,焦点会根据需要移动到下一个下拉列表。问题是在此阶段按下选项卡时,现在不是移动到第一个文本框(其 tabindex 设置为 1015),而是将焦点移动到 gridview 上。请注意,gridview 没有将其 tabindex 设置为任何值。现在按下选项卡时,焦点将移到页面上的其他用户控件上,即完全脱离所讨论的用户控件。然后在几次按下用户控件后返回到用户控件,然后按所需顺序移动,即第一个下拉列表,然后是第二个下拉列表,然后是第一个文本框,然后是第二个文本框,然后是第三个文本框,然后是第四个文本框。在此之后,它完全跳过 gridview 并移动到母版页上的控件。

因此,当页面加载时,选项卡的移动顺序与选项卡循环完成后的移动顺序不同,即所有控件都聚焦。

如果我通过使用鼠标单击将焦点移动到第一个文本框,然后按 Tab,则焦点会根据需要移动到第二个文本框,然后根据需要移动到第三个文本框,然后根据需要移动到第四个文本框。

我在页面中使用了两个用户控件,其中一个在上面讨论过,另外还有一个直接在页面上的控件。母版页中也有一些控件。

按下 Tab 键时不会发生服务器或客户端事件处理。

我尝试用 asp.net 文本框控件替换 html 输入控件,但问题仍然存在。

请求:请选择一个简单的解决方案,即不需要在代码隐藏中手动设置 tabindex 的解决方案,因为这不是非常可扩展的。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridExpense.ascx.cs" Inherits="StationaryManagementSystem.GridExpense" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<script type="text/javascript">
    function MinQuantity_Blurred() 
    {
        $('#' + '<%= hitMaxQuantitySearch.ClientID %>')[0].value = $('#' + '<%= hitMinQuantitySearch.ClientID %>')[0].value;
    }

    function FromDated_Blurred()
    {
        $('#' + '<%= txtToDatedSearch.ClientID %>')[0].value = $('#' + '<%= txtFromDatedSearch.ClientID %>')[0].value;
    }
</script>

<asp:Panel ID="panel" runat="server">
    <table>
        <tr>
            <td>
                <table width="800px">
                    <tr align="right">
                        <td class="columnOne">
                            Item : 
                        </td>
                        <td class="columnTwo">
                            <asp:DropDownList ID="ddlItemSearch" runat="server" EnableViewState="true" DataValueField="Id" DataTextField="Name" TabIndex="1005" Width="200px" />
                        </td>

                        <td class="columnOne">
                            Officer : 
                        </td>
                        <td class="columnTwo">
                            <asp:DropDownList ID="ddlOfficerSearch" runat="server" EnableViewState="true" DataValueField="Id" DataTextField="Name" TabIndex="1010" Width="200px" />
                        </td>
                    </tr>

                    <tr align="right">
                        <td align="right" style="width:200px">
                            From Quantity: 
                        </td>
                        <td align="left">
                            <input type="text" id="hitMinQuantitySearch" name="hitMinQuantitySearch" runat="server" maxlength="9" tabindex="1015"
                                style="width: 90px; text-align: right" onkeydown="return isNumericKeyDown(event, false);" onkeypress="return isNumericKeyPress(event, false);" 
                                onblur="MinQuantity_Blurred();" />
                        </td>
                        <td align="right" style="width:200px">
                            To Quantity: 
                        </td>
                        <td align="left">
                            <input type="text" id="hitMaxQuantitySearch" name="hitMaxQuantitySearch" runat="server" maxlength="9" tabindex="1020" 
                                style="width: 90px; text-align: right" onkeydown="return isNumericKeyDown(event, false);" onkeypress="return isNumericKeyPress(event, false);" />
                        </td>
                    </tr>

                    <tr align="right">
                        <td class="columnOne">
                            From Dated :
                        </td>

                        <td class="columnTwo">
                            <asp:TextBox ID="txtFromDatedSearch" runat="server" MaxLength="11" TabIndex="1025" onblur="FromDated_Blurred();" Width="90px" />
                            <asp:CalendarExtender ID="ceFromDatedSearch" runat="server" TargetControlID="txtFromDatedSearch" Format="dd-MMM-yyyy" />
                        </td>

                        <td class="columnOne">
                            To Dated :
                        </td>

                        <td class="columnTwo">
                            <asp:TextBox ID="txtToDatedSearch" runat="server" MaxLength="11" TabIndex="1030" Width="90px" />
                            <asp:CalendarExtender ID="ceToDatedSearch" runat="server" TargetControlID="txtToDatedSearch" Format="dd-MMM-yyyy" />
                        </td>

                        <td align="left">
                            <asp:Button ID="btnLoad" runat="server" Text="Load" TabIndex="1035" CssClass="foreRed gradientGreen cornerRound" OnClick="btnLoad_Click" />
                        </td>
                    </>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataSourceID="ods" AllowSorting="True" AllowPaging="True" PageSize="5" 
                    AutoGenerateSelectButton="True" onrowcommand="gv_RowCommand" CssClass="gridSapphire" PagerStyle-CssClass="pagerSapphire" 
                    AlternatingRowStyle-CssClass="alterSapphire" onpageindexchanged="gv_PageIndexChanged" Width="100%" EmptyDataText="List is empty." 
                    DataKeyNames="Id" EnableViewState="true" onrowdeleted="gv_RowDeleted">
                    <PagerSettings Mode="Numeric"/>
                    <Columns>
                        <asp:TemplateField Visible="false">
                            <ItemTemplate>
                                <asp:Label ID="lblIdGrid" runat="server" Text='<%#Eval("Id") %>'/>
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField Visible="false">
                            <ItemTemplate>
                                <asp:Label ID="lblIdItemGrid" runat="server" Text='<%#Eval("IdItem") %>' Style="text-align:left; padding-left:5px" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Item" SortExpression="NameItem" ControlStyle-Width="260px">
                            <ItemTemplate>
                                <asp:Label ID="lblNameItemGrid" runat="server" Text='<%#Eval("NameItem") %>' Style="text-align:left; padding-left:5px" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField Visible="false">
                            <ItemTemplate>
                                <asp:Label ID="lblIdOfficerGrid" runat="server" Text='<%#Eval("IdOfficer") %>' Style="text-align:left; padding-left:5px" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Officer" SortExpression="NameOfficer" ControlStyle-Width="200px">
                            <ItemTemplate>
                                <asp:Label ID="lblNameOfficerGrid" runat="server" Text='<%#Eval("NameOfficer") %>' Style="text-align:left; padding-left:5px" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Quantity" SortExpression="Quantity" ControlStyle-Width="100px">
                            <ItemTemplate>
                                <asp:Label ID="lblQuantityGrid" runat="server" Text='<%#Eval("Quantity") %>' Style="text-align:left; padding-left:5px" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Dated" SortExpression="Dated" ControlStyle-Width="100px">
                            <ItemTemplate>
                                <asp:Label ID="lblDatedGrid" runat="server" Text='<%# DateTime.Parse(Eval("Dated").ToString()).ToString("dd-MMM-yyyy") %>' 
                                    Style="text-align:left; padding-left:5px" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lbDeleteGrid" runat="server" CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete this Expense?')">
                                    Delete
                                </asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <PagerStyle CssClass="pagerSapphire" />
                    <AlternatingRowStyle CssClass="alterSapphire" />
                </asp:GridView>
                <asp:ObjectDataSource ID="ods" runat="server" TypeName="StationaryManagementSystem.Classes.DAL.Expense"
                    SelectMethod="Search" SelectCountMethod="CountSearch" SortParameterName="sSortExpression" EnablePaging="true"            
                    StartRowIndexParameterName="iZeroIndexStartPage" MaximumRowsParameterName="iSizePage" 
                    onselecting="ods_Selecting" 
                    DeleteMethod="Delete" ondeleting="ods_Deleting">
                        <DeleteParameters>
                            <asp:Parameter Name="ID" Type="Int64" />
                        </DeleteParameters>
                </asp:ObjectDataSource>
            </td>
        </tr>
    </table>
</asp:Panel>

4

1 回答 1

0

问题不在于 GridView,而在于我一直在使用但未在上面显示的 javascript 库select2 。一旦这被删除,选项卡排序几乎可以按预期工作。

一些问题仍然存在。现在选项卡在六个控件中正确移动:两个下拉列表和四个文本框,但之后不会进入 gridview。在 gridview 上设置 tabindex 并不能解决这个问题。

由于问题与本文中讨论的不同,因此我在这里有一个单独的问题。

如上所述,这里讨论的一些问题仍然存在。如果未设置gridview的tabindex,任何人都可以告诉gridview中控件的默认tabindex是什么。一旦网格视图获得焦点,选项卡就会以正确的顺序工作,但很难将焦点移到网格本身。实际上可以通过 gridview.Focus() 将焦点移到网格上;但这不会将焦点移动到gridview 内的第一个元素。因此,当按下选项卡时,下一个焦点将完全移出 gridview。

于 2012-08-02T09:00:41.443 回答