ASP + Jquery关注Gridview的下一个文本框 [英] ASP + Jquery focus next textbox from Gridview
问题描述
我有一个表格的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 =输入[index + 1];
alert（$（nextInput））;
$（nextInput）.focus（）;
} else {
$（inputs [0]）。焦点（）;
}
}
}）;
}）;
}）;
现在发生的事情是，它不会将文本框与文本集中在一起。另外，当文本框为空时，在实际上从文本框切换之前，需要在输入时双击垃圾邮件。
ASP.net WebForms标记：
< asp：Panel runat =serverID =pnlProdBOMalign =leftvisible =false
onload =pnlProdBOM_Load>
< div id =pnlProdBOMMain>
< div id =pnlProdBOMGridstyle =margin-top：30px; border：2px solid rgb（200,200,200）; border-radius：10px; padding：10px; background-color：rgb（245,245,245）; >
< div id =div2style =float：left;>
我用相同的jquery制作了一个JSFiddle，它在那里工作。我猜在ASP中必须有文本框？
> https://jsfiddle.net/55j6L92k/2/
编辑：
它可以与< input type =textid =txtScanLotNrstyle =background-color：＃D8D8D8; border-style：none;/>
但不与
< asp：TextBox ID =txtScanLotNrrunat = serverBackColor =＃D8D8D8BorderStyle =None>< / asp：TextBox>
不幸的是我需要使用
解决方案这应该工作。基本上你必须首先找到下一个< 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 =GridView1runat =serverAutoGenerateColumns =falseCssClass =mGrid>
<列>
< asp：TemplateField>
< ItemTemplate>
< asp：TextBox ID =TextBox1runat =server>< / asp：TextBox>
< / ItemTemplate>
< / asp：TemplateField>
< asp：TemplateField>
< ItemTemplate>
< asp：TextBox ID =TextBox2runat =server>< / asp：TextBox>
< / ItemTemplate>
< / asp：TemplateField>
< asp：TemplateField>
< ItemTemplate>
< asp：TextBox ID =TextBox3runat =server>< / asp：TextBox>
< / ItemTemplate>
< / asp：TemplateField>
< /列>
< / asp：GridView>
I have a gridview with a table. Inside this table we have a few labels and textboxes.
I am currently trying to switch from textbox to the next one when the user presses enter. For this, I am using 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();
}
}
});
});
});
What happens now, is that it doesn't focus the textbox with text inside. also, when textboxes are empty, you need to spam click twice on enter before it does actually swap from textbox.
ASP.net WebForms markup:
<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>
I made a JSFiddle with the same Jquery and it does work there. I guess there must be something with the Textboxes in ASP?
https://jsfiddle.net/55j6L92k/2/
EDIT:
It does work with <input type="text" id="txtScanLotNr" style="background-color:#D8D8D8; border-style: none; " />
but not with
<asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox>
Unfortunately I need to use
解决方案 This should work. Basically you have to find the next <td> first and then the TextBox within it.
<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>
Tested with this 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的下一个文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
