ASP + Jquery 从 Gridview 聚焦下一个文本框

Posted 2023-04-12

【中文标题】ASP + Jquery 从 Gridview 聚焦下一个文本框

【英文标题】：ASP + Jquery focus next textbox from Gridview

【发布时间】：2018-03-23 02:31:55

【问题描述】：

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

当用户按下回车键时，我目前正在尝试从文本框切换到下一个文本框。为此，我使用的是 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/

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

但不是与

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

不幸的是我需要使用

【问题讨论】：

这不是经典的 ASP - 它是 ASP.net WebForms - 建议相应地更改标题。

Appologies @Cal279 这不是我的项目。到目前为止，我只使用过 .net mvc，因为我的同事生病了，他们要求我这样做，但有点卡住了，这与我习惯的完全不同

【参考方案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>

【讨论】：

它从左侧文本框到右侧文本框持续 0.01 秒，然后返回原始文本框。我发现它与 jquery/javascript 无关。检查小提琴和编辑。这与

有关

那么可能有一些其他代码将焦点重新设置。我已经在带有 asp:TextBoxes 的 aspnet GridView 中进行了测试，它工作正常。

你能在 jsfiddle 中演示一下吗？