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.
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.
<SCRIPT type=text/javascript>
function doClick(buttonName,e)
{
var key;
if(window.event)
key = window.event.keyCode; else
key = e.which;
if (key == 13)
{
var btn = document.getElementById(buttonName);
if (btn != null)
{ 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: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.