Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET

Capturing the Enter key to cause a button click

Rate me:
Please Sign up or sign in to vote.
4.92/5 (38 votes)
19 Jan 2007CPOL2 min read 535.5K   2.8K   49   116
Have you ever wanted to trap the Enter key press event in ASP.NET and have it click a button for you? This article describes two options for capturing the Enter key press event and then clicking a button. One solution uses JavaScript, the other uses a Panel control.

Sample screenshot

Introduction

Have you ever wanted to trap the Enter key press event in ASP.NET and have it click a button for you? This article describes two options for capturing the Enter key press event and then clicking a button. One solution uses JavaScript, the other uses a Panel control.

Background

Most people like things to work a certain way. Consider a search engine text box. After you type in your search text, most people just want to push the Enter key and have the search start. It is a pain when you have to grab the mouse and move the cursor to the Search button and click it. The article describes two solutions to this problem.

The problem

Web pages have text boxes, text areas, etc., where users enter text. Often, after the text is entered, the user needs to click a button. It may be a search button, or a submit button, or some other sort of button. The problem is how to trap the Enter key press event so that the correct button can be clicked.

The solution

Let's explore two solutions to this problem. First, let us look at using JavaScript. With this solution, each textbox needs to have some JavaScript attached to the onKeyPress JavaScript event. I usually do this in the pageload method in the code-behind.

C#
//Add the javascript so we know where we want the enter key press to go
if (!IsPostBack)
{
   txtboxFirstName.Attributes.Add("onKeyPress", 
                   "doClick('" + btnSearch.ClientID + "',event)");
   txtboxLastName.Attributes.Add("onKeyPress", 
                  "doClick('" + btnSearch.ClientID + "',event)");
   txtboxAddress1.Attributes.Add("onKeyPress", 
                  "doClick('" + btnSearch.ClientID + "',event)");
   txtboxAddress2.Attributes.Add("onKeyPress", 
                  "doClick('" + btnSearch.ClientID + "',event)");
   txtboxCity.Attributes.Add("onKeyPress", 
              "doClick('" + btnSearch.ClientID + "',event)");
   txtboxState.Attributes.Add("onKeyPress", 
               "doClick('" + btnSearch.ClientID + "',event)");
   txtboxZipcode.Attributes.Add("onKeyPress", 
                 "doClick('" + btnSearch.ClientID + "',event)");
}

Note: You pass into the JavaScript method the button's ClientID so that the JavaScript method can find the button and call its Click method.

Next, we need a JavaScript method called doClick in the ASP.NET form.

JavaScript
<SCRIPT type=text/javascript>
    function doClick(buttonName,e)
    {
        //the purpose of this function is to allow the enter key to 
        //point to the correct button to click.
        var key;

         if(window.event)
              key = window.event.keyCode;     //IE
         else
              key = e.which;     //firefox
    
        if (key == 13)
        {
            //Get the button the user wants to have clicked
            var btn = document.getElementById(buttonName);
            if (btn != null)
            { //If we find the button click it
                btn.click();
                event.keyCode = 0
            }
        }
   }
</SCRIPT>

The next solution is using a Panel control. In this case, the panel is doing all the work.

ASP.NET
<asp:Panel ID="panSearch" runat="server" 
       DefaultButton="btnSearch2" Width="100%" >
    <table width="100%">
    
    <tr>
     <td>First Name</td>
     <td ><asp:TextBox ID="txtboxFirstName2" 
           runat="server" ></asp:TextBox></td>
    </tr>
    ...

Notice that the Panel tag has a property called DefaultButton. You set this property to the button ID of the button you want to be clicked on an Enter key press event. So any text box inside of the Panel will direct its Enter key press to the button set in the DefaultButton property of the Panel.

Which one is better?

I suppose we could spend a lot of time arguing about which method is better. Some people like JavaScript, so that might be the better one. Others hate JavaScript and prefer writing less code, so they would choose the Panel solution. One thing I would note is that if you have several buttons and need to have different text boxes click different buttons, then you have to go with the JavaScript solution since it gives you that flexibility. I guess I will let you decide which solution best fits your needs.

Conclusion

Hopefully, this article demonstrates two useful techniques to capture the Enter key press event and directing it to click the correct button. Let me know which method you prefer.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
I started my programmer career over 26 years ago doing COBOL and SAS on a MVS mainframe. It didn't take long for me to move into windows programming. I started my windows programming in Delphi (Pascal) with a Microsoft SQL server back end. I started working with vb.net when the beta 2 came out in 2001. After spending most of my programming life as a windows programmer I started to check out asp.net in 2004. I achieved my MCSD.net in April 2005. I have done a lot of MS SQL database stuff. I have a lot of experience with Window Service and Web services as well. I spent three years as a consultant programing in C#. I really enjoyed it and found the switch between vb.net and C# to be mostly syntax. In my current position I am programming in C# working on WPF and MSSql database stuff. Lately I have been using VS2019.

On a personal note I am a born again Christian, if anyone has any questions about what it means to have a right relationship with God or if you have questions about who Jesus Christ is, send me an e-mail. ben.kubicek[at]netzero[dot]com You need to replace the [at] with @ and [dot] with . for the email to work. My relationship with God gives purpose and meaning to my life.

Comments and Discussions

 
Questionasp:imageButton | Edge Pin
Louis-Alex Vallée26-Oct-23 4:13
Louis-Alex Vallée26-Oct-23 4:13 
Questionhow to do in datepicker and dropdown ,radiobutton Pin
Nandhu_nands19-Jun-19 0:58
Nandhu_nands19-Jun-19 0:58 
QuestionISSUE WITH Internet Explorer 11 Pin
NIKS SHINE28-Jan-15 0:07
professionalNIKS SHINE28-Jan-15 0:07 
AnswerRe: ISSUE WITH Internet Explorer 11 Pin
kubben28-Jan-15 7:15
kubben28-Jan-15 7:15 
GeneralRe: ISSUE WITH Internet Explorer 11 Pin
NIKS SHINE28-Jan-15 19:18
professionalNIKS SHINE28-Jan-15 19:18 
GeneralRe: ISSUE WITH Internet Explorer 11 Pin
kubben29-Jan-15 4:30
kubben29-Jan-15 4:30 
QuestionCapturing the Enter key to cause a button click Pin
Member 1060609518-Feb-14 4:48
Member 1060609518-Feb-14 4:48 
QuestionCapturing the Enter key to cause a button click Pin
Member 1060609518-Feb-14 3:38
Member 1060609518-Feb-14 3:38 
GeneralMy vote of 5 Pin
hueikar22-Aug-13 20:06
hueikar22-Aug-13 20:06 
GeneralRe: My vote of 5 Pin
kubben23-Aug-13 1:49
kubben23-Aug-13 1:49 
GeneralMy vote of 5 Pin
ogcalyps9-May-13 4:36
ogcalyps9-May-13 4:36 
GeneralRe: My vote of 5 Pin
kubben9-May-13 7:24
kubben9-May-13 7:24 
AnswerThanks Pin
Bartho Bernsmann26-Feb-13 19:32
Bartho Bernsmann26-Feb-13 19:32 
GeneralRe: Thanks Pin
kubben27-Feb-13 1:56
kubben27-Feb-13 1:56 
QuestionAbout the post Pin
tahri jouti2-Jan-13 23:14
tahri jouti2-Jan-13 23:14 
Questionhi Pin
sri4326-Dec-12 19:03
sri4326-Dec-12 19:03 
This code is not working in IE and Chrome
AnswerRe: hi Pin
kubben27-Dec-12 3:57
kubben27-Dec-12 3:57 
GeneralRe: hi Pin
sri4327-Dec-12 17:31
sri4327-Dec-12 17:31 
GeneralRe: hi Pin
kubben28-Dec-12 3:53
kubben28-Dec-12 3:53 
GeneralMy vote of 5 Pin
BBBwex24-Aug-12 7:34
BBBwex24-Aug-12 7:34 
GeneralMy vote of 5 Pin
OldTrain1-Jun-12 3:37
OldTrain1-Jun-12 3:37 
QuestionThank you.. Pin
naylinnhtun15-Dec-11 17:08
naylinnhtun15-Dec-11 17:08 
AnswerRe: Thank you.. Pin
kubben16-Dec-11 1:25
kubben16-Dec-11 1:25 
QuestionMy Vote of 5 Pin
Gandalf_TheWhite13-Nov-11 20:18
professionalGandalf_TheWhite13-Nov-11 20:18 
AnswerRe: My Vote of 5 Pin
kubben14-Nov-11 2:19
kubben14-Nov-11 2:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.