1

2 つのドロップダウン リスト、4 つのテキスト ボックス、1 つのグリッドビューをこの順序で持つユーザー コントロールがあります。タブキーを押すと、この順番でフォーカスが移動するようにしたいです。

tabindex プロパティが何も設定されていない gridview を除いて、各コントロールの tabindex プロパティを順番に設定しています (1005、1010、1015 ...)。

page_load で、最初のドロップダウンリストにフォーカスを設定しています。

ページが読み込まれると、必要に応じて最初のドロップダウンリストにフォーカスが置かれます。次に、タブが押されると、必要に応じてフォーカスが次のドロップダウンリストに移動します。問題は、この段階でタブが押されると、最初のテキストボックス (tabindex が 1015 に設定されている) に移動する代わりに、フォーカスがグリッドビューに移動することです。gridview の tabindex は何も設定されていないことに注意してください。タブが押されると、フォーカスはページ上の他のユーザー コントロールに移動します。つまり、説明したユーザー コントロールから完全に外れます。次に、キーを数回押すと、ユーザー コントロールがユーザー コントロールに戻り、必要な順序で移動します。つまり、最初のドロップダウン リスト、2 番目のドロップダウン リスト、1 番目のテキスト ボックス、2 番目のテキスト ボックス、3 番目のテキスト ボックス、4 番目のテキスト ボックスです。この後、グリッドビューを完全にスキップし、マスター ページにあるコントロールに移動します。

そのため、ページが読み込まれると、タブのサイクルが完了したときとは異なる順序でタブが移動します。つまり、すべてのコントロールがフォーカスされます。

マウス クリックを使用して最初のテキスト ボックスにフォーカスを移動し、Tab を押すと、必要に応じてフォーカスが 2 番目のテキスト ボックスに移動し、次に必要に応じて 3 番目のテキスト ボックスに移動し、次に 4 番目のテキスト ボックスに移動します。

ページで 2 つのユーザー コントロールを使用しています。そのうちの 1 つは上で説明したもので、さらにページ上で直接コントロールを使用しています。マスターページにもいくつかのコントロールがあります。

Tab キーが押されている場合、サーバー側またはクライアント側のイベント処理は発生しません。

HTML入力コントロールをasp.netテキストボックスコントロールに置き換えようとしましたが、問題は残ります。

リクエスト: シンプルなソリューションを優先してください。スケーラビリティが低いため、コード ビハインドで手動で 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にあります。これが削除されると、タブの順序はほぼ希望どおりに機能します。

いくつかの問題が残っています。これで、タブは 6 つのコントロール (2 つのドロップダウン リストと 4 つのテキスト ボックス) を正しく移動しますが、その後、グリッドビューには移動しません。gridview で tabindex を設定しても、この問題は解決しません。

問題はこの投稿で説明したものとは異なることが判明したため、ここで別の質問があります。

前述のように、ここで説明した問題のいくつかはまだ残っています。gridview の tabindex が設定されていない場合、gridview 内のコントロールのデフォルトの tabindex を誰でも知ることができます。グリッドビューがフォーカスを取得すると、タブは正しい順序で機能しますが、フォーカスをグリッド自体に移動するのは非常に困難です。実際には、gridview.Focus(); によってフォーカスをグリッドに移動できます。ただし、これはグリッドビュー内の最初の要素にフォーカスを移動しません。したがって、タブが押されると、次のフォーカスは完全にグリッドビューの外に移動します。

于 2012-08-02T09:00:41.443 に答える