Enter Key in ASP.NET - Complete Research

One of the common requests in ASP.NET is to submit a form when visitor hits an Enter key. That could be a case if, for example you want to make Login Screen. It is expected that user just hit enter when he insert a user name and password instead to of forcing him to use a mouse to click login button. If you want to make search function on your web site, it is frequently required to give a possibility to hit enter after you insert a search terms instead of mouse click on a Search button.

In HTML or classic ASP pages is not hard to submit forms using the enter key on keyboard. Programmer use a <input type="submit"> to make a default button. If web site visitor click on that button or press enter key, the form will be submitted.

Of course, you can have a more than one form on your page and individual submit button for every form.

You don't want to submit a form with Enter key?

Rarely, you will need to disable an Enter key and avoid to submit form. If you want to prevent it completely, you need to use OnKeyDown handler on <body> tag of your page. The javascript code should be:

if (window.event.keyCode == 13)
{
event.returnValue=false;
event.cancel = true;
}

Common ASP.NET problems with Enter key

If you try to use Enter key in ASP.NET, according to your browser's type, you can get really weird results. For example, try to place one ASP.NET textbox and a button to the web form. Write a code on a OnClick event of a button. That could be something simple, like:

Response.Write("The button was clicked!");

Now start debugging and write something to textbox. If you press enter while focus is on textbox, form will submit, but your code for button's click event will not be executed.

Stop the debugging and place one more simple HTML textbox to the form. You will not write anything in this textbox, so you can even make it invisible. Just place it somewhere inside of your form tag.

Start debugging again. You cannot see the second textbox, and everything looks like before. Try again to write something in first textbox. If you press enter now, form will submit, and your code for button's click event will now be executed. This is extremely different behavior, and you did nothing except you placed one invisible textbox on web form. :)

Maybe it is not best practice, but placing invisible textbox could be simple solution for you if you have only one button on your web form. But, what if you have a different situation? What if you have a few buttons with only one textbox, or more than one text box with only one button, or many text boxes and many buttons with different code for each button, and all that on one form?

Different browsers have a different behavior in these cases. In case that you have more buttons, only first button will be "clicked" every time. So, we need some other approach to get an universal solution.

How to make a default button in ASP.NET

We need to specify exactly which button will be "clicked" when visitor press Enter key, according to which textbox currently has a focus. The solution could be to add onkeydown attribute to textbox control with this code:

TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('"+Button1.UniqueID+"').click();return false;}} else {return true}; ");

This line of code will cause that button Button1 will be "clicked" when visitors press Enter key and cursor is placed in TextBox1 textbox. On this way you can "connect" as many text boxes and buttons as you want.

Easy solution for default button

There is a free component that allows you to assign a button to the "enter-pressed" client side event of input controls. If you type some text in text box and press Enter, the form will postback, and the server side click event of your button is fired. You don't need to write any code, but you only need to use this control's "DefaultButton" property. It you are a beginner programmer this could be a life saver. More about MetaBuilders DefaultButtons Control you can find at http://www.metabuilders.com/Tools/DefaultButtons.aspx

Default buttons in ASP.NET 2.0 and ASP.NET 3.5

ASP.NET 2.0 makes this problems easier and introduce a concept of a "default button". New defaultbutton attribute can be used with <form> or <asp:panel> control. What button will be "clicked" depends of where actually cursor is and what button is chosen as a default button for form or a panel.

Here is sample HTML code that contains one form and one panel control:

Last words about Enter

This tutorial covers different cases when you need to manipulate with Enter key. There is Tab key in ASP.NET tutorial, which covers problem with Tab keyboard key. Also, Bean Software offers specialized Keyboard Shortcut Controls. With these controls, you can manipulate with different keyboard shortcut without any code. That could be simple shortcuts like Enter, Tab or just placing a focus in text box, or more complicated like Ctrl + Shift + O or similar, just like shortcuts used in Windows applications. Source code is included.

Note that all solutions in this tutorial use JavaScript to submit form when visitor press Enter key on its keyboard. If JavaScript is disabled in web browser or if visitor uses some very old version, form will not submit. In that (pretty rare) case, user must use a mouse to click on a button. Even Google Search form works on the same way.

If you have some problem related to this issue which is not covered in tutorial, please let us know.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback | Google