Thursday, April 25, 2013

TextBox KeyPress Event 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:
private void textBox1_KeyPress(object sender, KeyPressEventArgs e)
        {
            MessageBox.Show("ok");
        }

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
 

    <script type="text/javascript"  lang="js">
        $(function()
        {
               $("input[type=text]").keypress(function(){
                  alert("Wow; Its Work!.")
               
           });
                    });
    </script>

</head>

<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:TextBox ID="TextBox1" runat="server" style="top: 158px; left: 414px; position: absolute; height: 22px; width: 128px"></asp:TextBox>
   
    </div>
        <p>
            <asp:TextBox ID="TextBox2" runat="server" style="top: 275px; left: 415px; position: absolute; height: 22px; width: 128px"></asp:TextBox>
        </p>
    </form>
</body>
</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.
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript"  lang="js">
 
        $(function () {
            $("#<%=TextBox1.ClientID %>").keypress(function () {
                alert("Wow; Its Work!.")
            });
        });
 

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:TextBox ID="TextBox1" runat="server" style="top: 144px; left: 410px; position: absolute; height: 22px; width: 128px"></asp:TextBox>
   
    </div>
        <p>
            <asp:TextBox ID="TextBox2" runat="server" style="top: 204px; left: 412px; position: absolute; height: 22px; width: 128px"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" style="top: 155px; left: 326px; position: absolute; height: 1px; width: 34px" Text="Textbox1"></asp:Label>
            <asp:Label ID="Label2" runat="server" style="top: 211px; left: 331px; position: absolute; height: 19px; width: 34px" Text="Textbox2"></asp:Label>
        </p>
    </form>
</body>
</html>
 

Output

When you press a key in textbox1:

keypressvent3-in-php.jpg

When you press a key in textbox2:

keypressvent4-in-php.jpg

No comments:

Post a Comment

Kashmir 370 and 35A : The Wound of india

क्या है जम्मू-कश्मीर में लागू धारा 370,35A पूर्ण विवरण Know about 370 act in Jammu एक बार फिर से राजनीति गलियारे में धारा 370,35A को ल...