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();
                        }
                    }
                });
            });
        });

现在发生的事情是它没有将文本框与文本集中在一起。此外，当文本框为空时，您需要在输入之前单击两次垃圾邮件，然后才能从文本框实际切换。

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/

修改它适用于＆lt; 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>，然后再找到它内的TextBox。

<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>

ASP + Jquery从Gridview关注下一个文本框

1 个答案: