Post
Ask Question

KeyPress Event of TextBox in ASP.NET

Introduction

In this article, I explain the "KeyPress" event of the "TextBox" control in ASP. NET. But I will explain in the context of Windows Forms applications. In Windows Forms applications, you can easily implement the "KeyPress" event of the "TextBox control". To implement an event of a TextBox like "keypress", "keydown" etc., right-click on the TextBox; a pop-up menu will be opened, then select "Properties" -> "Event" and double-click on the event that you want to implement, so suppose I want to implement the "keyPress" event, then I simply double-click on this event, and write the simple code just like:

  1. private void textBox1_KeyPress(object sender, KeyPressEventArgs e)  
  2. {  
  3.     MessageBox.Show("ok");  
  4. }

After running your Windows Forms form, when you press any key in the TextBox control , an "ok" message will be display. Now one thing is clear, its is easy to implement, you do not need a lot of effort with this event.

But, if we talk about an ASP.NET TextBox control, it does not provide "keypress" and "keydown" and many more events, so how do you implement those events? One possibility is to provide a "keypress" or "keydown" event using JavaScript function or say using jQuery as described below.

First, I write the code that is common for all the textboxes or say a one function that provides the "keypress" event for all textboxes in ASP. NET.

Example

In this example I have been describing the two server TextBox controls, and write a jQuery function to provide the functionality of "keyPress" event. When you press any key in any TextBox a alert message "Wow: Its work!." will be displayed.

Note: You can also do it with the HTML textboxes.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="jquery.js" type="text/javascript"></script>  
  7.     <script type="text/javascript"  lang="js">  
  8.         $(function()  
  9.         {  
  10.                $("input[type=text]").keypress(function(){  
  11.                   alert("Wow; Its Work!.")  
  12.            });  
  13.         });  
  14.     </script>  
  15. </head>  
  16. <body>  
  17.     <form id="form1" runat="server">  
  18.     <div>  
  19.         <asp:TextBox ID="TextBox1" runat="server" style="top: 158px; left: 414px; position: absolute; height: 22px; width: 128px"></asp:TextBox>  
  20.     </div>  
  21.         <p>  
  22.             <asp:TextBox ID="TextBox2" runat="server" style="top: 275px; left: 415px; position: absolute; height: 22px; width: 128px"></asp:TextBox>  
  23.         </p>  
  24.     </form>  
  25. </body>  
  26. </html>

Output

When you press a key in textbox1:

keypressvent1-in-php.jpg

When you press a key in textbox2:
keypressvent2-in-php.jpg

Now, the code above is common for all the textboxes, and now if you want add the functionality ("keypress event") with a particular TextBox, the following code shows how to do this.

Example

The following example only works with a textbox1 because I use the code  " $("#<%=TextBox1.ClientID %>").keypress(function ()", so this only works with textbox1.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="jquery.js" type="text/javascript"></script>  
  7.     <script type="text/javascript"  lang="js">  
  8.         $(function () {  
  9.             $("#<%=TextBox1.ClientID %>").keypress(function () {  
  10.                 alert("Wow; Its Work!.")  
  11.             });  
  12.         });  
  13.     </script>  
  14. </head>  
  15. <body>  
  16.     <form id="form1" runat="server">  
  17.     <div>  
  18.         <asp:TextBox ID="TextBox1" runat="server" style="top: 144px; left: 410px; position: absolute; height: 22px; width: 128px"></asp:TextBox>  
  19.     </div>  
  20.         <p>  
  21.             <asp:TextBox ID="TextBox2" runat="server" style="top: 204px; left: 412px; position: absolute; height: 22px; width: 128px"></asp:TextBox>  
  22.             <asp:Label ID="Label1" runat="server" style="top: 155px; left: 326px; position: absolute; height: 1px; width: 34px" Text="Textbox1"></asp:Label>  
  23.             <asp:Label ID="Label2" runat="server" style="top: 211px; left: 331px; position: absolute; height: 19px; width: 34px" Text="Textbox2"></asp:Label>  
  24.         </p>  
  25.     </form>  
  26. </body>  
  27. </html>

 

Output

When you press a key in textbox1:

keypressvent3-in-php.jpg

When you press a key in textbox2:

keypressvent4-in-php.jpg


Similar Articles