我在itemtemplate上遇到了按键事件的问题,例如Gridview中的asp.net文本框。
我在gridview中有5个文本框。我想要做的是每当我按下文本框上的输入时,它将关注下一个文本框并计算总金额并将总值放在最后一个文本框中。
有没有解决方法如何从代码隐藏或使用jquery执行此操作?
Fyi,我也在我的页面中使用了asp.net updatepanel。
<asp:GridView ID="gvItems" runat="server" AutoGenerateColumns="false"
ShowFooter="true" GridLines="None" BorderStyle="None" CssClass="table
table-striped">
<Columns>
<asp:TemplateField HeaderText="Number">
<ItemStyle CssClass="col-md-2" />
<ItemTemplate>
<asp:TextBox ID="txtNumber" runat="server" CssClass="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemStyle CssClass="col-md-2" />
<ItemTemplate>
<asp:TextBox CssClass="form-control" runat="server" ID="txt4A"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemStyle CssClass="col-md-2" />
<ItemTemplate>
<asp:TextBox CssClass="form-control" runat="server" ID="txt3A"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemStyle CssClass="col-md-2" />
<ItemTemplate>
<asp:TextBox CssClass="form-control" runat="server" ID="txt2A"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemStyle CssClass="col-md-2" />
<ItemTemplate>
<asp:TextBox ID="txtTotal" runat="server" CssClass="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="col-md-1" />
<ItemTemplate>
<asp:LinkButton ID="btnDelete" CommandName="Delete"
CommandArgument='<%# Eval("t_id")%>' runat="server" CssClass="btn red btn-default btn-circle waves-effect waves-circle waves-float"><i class="fa fa-times" aria-hidden="true"></i>
</asp:LinkButton>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate><asp:Button ID="ButtonAdd" CssClass="btn btn-default waves-effect waves-circle waves-float" OnClick="AddNewRowToGrid" CausesValidation="false" runat="server" Text="Add Item" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
这是我的javascript代码:
function SwitchOnEnter(e, NextTextBox) {
var keynum
var keychar
var numcheck
if (window.event) // IE
{
keynum = e.keyCode
}
else if (e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
if (keynum == 13) {
window.setTimeout(function () {
document.getElementById(NextTextBox).focus();
}, 0);
return false;
}
}
这是我执行jquery的代码:
Private Sub gvItems_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles gvItems.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim txt4A As TextBox = DirectCast(e.Row.FindControl("txt4A"), TextBox)
Dim txt3A As TextBox = DirectCast(e.Row.FindControl("txt3A"), TextBox)
Dim txt2A As TextBox = DirectCast(e.Row.FindControl("txt2A"), TextBox)
Dim txtNumber As TextBox = DirectCast(e.Row.FindControl("txtNumber"), TextBox)
txtNumber.Attributes.Add("onkeydown", [String].Format("SwitchOnEnter(event,'{0}');", txt4A.ClientID))
txt4A.Attributes.Add("onkeydown", [String].Format("SwitchOnEnter(event,'{0}');", txt3A.ClientID))
End If
End Sub
我设法通过使用此方法将光标移动到下一个文本框但光标只闪烁一次然后它消失了。看起来像输入键触发回发。