OnKeyDown Event of a textbox
In this article I'm trying to explain how to work with Onkeydown event of a textbox. If we try to enter a value in textbox need to perform some operations without getting post back or without click any button. If we start to enter data in textbox automatically some operation should perform in that case we use OnKeyDown event of a textbox and call javascript function in that.
OnKeyDown Event of a textbox:
In this article I'm trying to explain how to work with Onkeydown event of a textbox. If we try to enter a value in textbox need to perform some operations without getting post back or without click any button. If we start to enter data in textbox automatically some operation should perform in that case we use OnKeyDown event of a textbox and call javascript function in that.
Refer below sample, on here what I'm trying to do is when I try to enter text in textbox automatically I want to checked the checkbox.OnKeyDown Event:
This event will fire when we try to press any key in the keyboard while enter the text in textbox. JavaScript code:
<script type="text/Javascript" language="javascript">
function Keydown(txt) {
//find gridview control
var GV = document.getElementById("<%=GV.ClientID %>");
var row = txt.parentNode.parentNode;
//find the current row of a gridview
var rowIndex = row.rowIndex;
//checked the checkbox of current row while enter anything in textbox.
GV.rows[rowIndex].cells[0].getElementsByTagName("INPUT")[0].checked = true;
}
</script>How we call JavaScript code in Textbox control:
<asp:TextBox ID="txtRemarks" runat="server" OnKeyDown="Keydown(this);" ></asp:TextBox>Source Code:
In this example I take one Gridview control and inside gridview I have one checkbox and one textbox controls. While enter the text in textbox I want to checked the checkbox.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OnkeyDown.aspx.cs" Inherits="OnkeyDown" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/Javascript" language="javascript">
function Keydown(txt) {
var GV = document.getElementById("<%=GV.ClientID %>");
var row = txt.parentNode.parentNode;
var rowIndex = row.rowIndex;
GV.rows[rowIndex].cells[0].getElementsByTagName("INPUT")[0].checked = true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<br />
<br />
<table>
<asp:GridView ID="GV" runat="server"
AutoGenerateColumns="false" HeaderStyle-BackColor="#7779AF"
HeaderStyle-ForeColor="white" >
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" Enabled="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Items">
<ItemTemplate>
<asp:Label ID="lblItem" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Item") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblItemDesc" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Item_Desc") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks / Rating">
<ItemTemplate>
<asp:TextBox ID="txtRemarks" runat="server" OnKeyDown="Keydown(this);" Text='<%#DataBinder.Eval(Container.DataItem,"Remarks") %>' ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</table>
</div>
</form>
</body>
</html>Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class OnkeyDown : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind_GV();
}
}
protected void Bind_GV()
{
DataTable dt = new DataTable();
dt.Columns.Add("Item");
dt.Columns.Add("Item_Desc");
dt.Columns.Add("Remarks");
DataRow dr = dt.NewRow();
dr["Item"] = "LapTop";
dr["Item_Desc"] = "Sony Vaio";
dr["Remarks"] = "";
dt.Rows.Add(dr);
DataRow dr1 = dt.NewRow();
dr1["Item"] = "Mobile";
dr1["Item_Desc"] = "Samsung Champ Duos";
dr1["Remarks"] = "";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2["Item"] = "Jeans";
dr2["Item_Desc"] = "Crocodile";
dr2["Remarks"] = "";
dt.Rows.Add(dr2);
DataRow dr3 = dt.NewRow();
dr3["Item"] = "T-Shirt";
dr3["Item_Desc"] = "Reebok";
dr3["Remarks"] = "";
dt.Rows.Add(dr3);
if (dt.Rows.Count > 0)
{
GV.DataSource = dt;
GV.DataBind();
}
}
}Output:
Conclusion:
This article will help you those who are looking for same..
Follow