javascript - ASP + Jquery 聚焦 Gridview 中的下一个文本框

Question

我有一个带有表格的 GridView 。在这个表中，我们有一些标签和文本框。

我目前正在尝试当用户按 Enter 键时从文本框切换到下一个文本框。为此，我使用 Jquery。

 $(function () {
            var inputs = $(".mGrid").find('input:text');
            inputs.each(function (index, element) {
                $(element).on('keyup', function (e) {
                    e.preventDefault();
                    if (e.which === 13) {
                    //    alert("enter pressed"); 
                        if (index < inputs.length - 1) {
                            var currentInput = inputs[index];
                            //currentInput.blur();
                            $(':text').blur();
                            var nextInput = inputs[index + 1];
                            alert($(nextInput));
                            $(nextInput).focus();
                        } else {
                            $(inputs[0]).focus();
                        }
                    }
                });
            });
        });

现在发生的情况是，它没有将内部有文本的文本框聚焦。另外，当文本框为空时，您需要在 Enter 上单击两次，然后才能真正从文本框交换。

ASP.net WebForms 标记:

<asp:Panel runat="server" ID="pnlProdBOM" align="left" visible="false"
           onload="pnlProdBOM_Load">
    <div id="pnlProdBOMMain">
        <div id="pnlProdBOMGrid" style="margin-top:30px;border: 2px solid rgb(200,200,200);border-radius:10px;padding:10px;background-color:rgb(245,245,245);">
            <div id="div2" style="float:left;">
                <asp:GridView ID="vwProdBOM" runat="server" CaptionAlign="Top" CssClass="mGrid"
                              onrowcreated="vwProdBOM_RowCreated"
                              onrowdatabound="vwProdBOM_RowDataBound" AutoGenerateColumns="False"
                              AllowPaging="True" onpageindexchanging="vwProdBOM_PageIndexChanging">
                    <Columns>
                        <asp:TemplateField HeaderText="Lotnummers">
                            <ItemTemplate><asp:CheckBox ID="Lotnummers" runat="server" Enabled=False Checked='<%# Eval("Lotnummers") %>'></asp:CheckBox></ItemTemplate>
                        </asp:TemplateField>
                      <!-- more thingies. remove for SO-->
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ScanLotNr">
                            <ItemTemplate>
                                <asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Right" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Gewicht">
                            <ItemTemplate>
                                <asp:TextBox ID="txtScanAantal" runat="server" BackColor="#D8D8D8" BorderStyle="None" AutoPostBack="False"></asp:TextBox>
                                <asp:RangeValidator ID="ValScanAantal" runat="server" ControlToValidate="txtScanAantal" ErrorMessage="*" MaximumValue="100000" MinimumValue="-100000" Type="Double"></asp:RangeValidator>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Right" />
                        </asp:TemplateField>
                    </Columns>
                    <PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="~/Nav1.png"
                                   LastPageImageUrl="~/Nav4.png" NextPageImageUrl="~/Nav3.png"
                                   PreviousPageImageUrl="~/Nav2.png" />
                    <SelectedRowStyle BackColor="Red" />
                </asp:GridView>
            </div>
            <div id="div1" style="float:left;margin-left:20px;margin-top:30px;">
                <div id="div4">
                    <asp:Panel ID="pnlLotNr_Fill" runat="server" Width="100px"></asp:Panel>

我用相同的 Jquery 创建了一个 JSFiddle，它确实可以在那里工作。我想 ASP 中的文本框一定有什么东西？

https://jsfiddle.net/55j6L92k/2/

编辑:它确实适用于 <input type="text"id="txtScanLotNr"style="background-color:#D8D8D8; border-style: none; "/>

但不与

  <asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox> 

不幸的是我需要使用

Answer 1

这应该有效。基本上你必须找到下一个<td>首先是其中的文本框。

<script type="text/javascript">
    $('.mGrid input[type=text]').keypress(function (e) {
        if (e.keyCode == 13) {
            //eerst de td vinden ipv $(this).next anders werkt het niet
            $(this).closest('td').next('td').find('input[type=text]').focus();
        } else {
            return;
        }
    });
</script>

使用此 GridView 进行测试

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="mGrid">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>