Vinz' Blog

"Code, Beer and Music" ~ my way of being a programmer!
posts - 123, comments - 343, trackbacks - 0

My Links

News

Archives

Image Galleries

Forcing Button Click event to fire up when pressing ENTER Key on TextBox

I decided to write this article because I always encounter this kind of problem in the ASPNET Forum frequently. So here's a simple (one way) solution on how to invoke the Button Click event when pressing the ENTER key in the TextBox control.

ASPX Mark Up and JavaScript function

<head>
    <title>Untitled Page</title>
</style>
<script type="text/javascript" language="javascript">

 function controlEnter (obj, event)
 {      
     var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;      
     if (keyCode == 13)
     {                  
        document.getElementById(obj).click();
                    return false;      
     }      
     else  {
                   return true; 
     } 
 }
</script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>

        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />

    </form>
</body>

RELEVANT CODES:

protected void Page_Load(object sender, EventArgs e)
{
    TextBox1.Attributes.Add("onkeypress", "return controlEnter('" + Button1.ClientID + "', event)");
}

protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write("Button was Clicked!");
}

That's it... Hope this atricle helps you!

Print | posted on Thursday, September 11, 2008 10:31 AM |

Feedback

Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

The .click() function is not crossbrowser compliant, it will not fire the postback in firefox.

To fix your code you can change the following:
document.getElementById(obj).click(); => __doPostBack(obj, '');

TextBox1.Attributes.Add("onkeypress", "return controlEnter('" + Button1.ClientID + "', event)"); =>
TextBox1.Attributes.Add("onkeypress", "return controlEnter('" + Button1.UniqueID + "', event)");


__doPostBack() is a function that is generated by ASP.NET that takes a control name and arguments, the name you can get from Control.UniqueID, the arguments you can leave blank in most cases. UniqueID will be different than ClientID when the control is inside a usercontrol or a masterpage.
9/11/2008 11:16 AM | Anon
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

Hi Anon,

Thanks for your comment, really appreciate it. But what do you mean by the .click() function is not a crossbrowse compliant? have you test it? What browser? Because I test that code in IE and FF before i post it here..
9/12/2008 12:57 AM | vinz
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

Well hell.....it seems to not be an issue any longer, if you search google http://www.google.com/search?hl=en&q=firefox+click+event&aq=f&oq=

you'll find a lot of people frustrated by the previously unsupported event.
9/12/2008 11:18 AM | Anon
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

Hi...thanks for this one. I'm still learning javascript so I didn't really understand the code a lot. If you could, explain them to me. But it's alright, if you won't.
11/24/2008 3:12 PM | Kail
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

Yes,its work very fine
1/25/2009 9:24 PM | ravi
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

Its working. I am looking for the exact code you provided. Thank you.
2/9/2009 10:33 PM | Kiran
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

not wrking in firefox
3/8/2009 7:54 PM | test
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

Hi it works fine,thank you for solving my big problem,I was in tension when i had a deadlines and I found the good solution.
4/28/2009 6:18 PM | Swapnil
Gravatar

# re: Forcing Button Click event to fire up when pressing ENTER Key on TextBox

I want to achieve this functionality on the whole page, i mean to say i have a asp.net page i have a save button and on pressing Ctrl + S, i want to initiate the save button click event.

5/18/2009 6:32 AM | guru
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: