In this post, I am explaining the button click functionality on key press in a textbox. I am using javascript to link the input textbox and the associated button that has to be clicked when the enter key is pressed in the textbox. One can preview it by taking the example of search textbox and GO button!
Fig. Clicking asp.net button on enter key press in textbox
We have seen search textboxes in almost all of the websites which imply 'Go' or 'Search' button click when Return key (Enter key) is pressed. Naturally, users love to press enter key instead of clicking search button next to the input textbox. Wouldn't it be nice if we could do the same for our web pages also? Yeah, I have implemented the button click feature on keypress in textbox control many times. But the last time practice on a web application that added both the textbox and the search button dynamically via javascript was really interesting story that inspired me to re-share the code [since I also learnt it on Internet].
Design Page Markup (SearchPage.aspx)
We do have one textbox and one button in the search page.
<div>
Search Text: <asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
</div>
JavaScript Code
This javascript code will be invoked when enter key is pressed in the textbox.
<script>
function clickButton(e, buttonid){
var evt = e ? e : window.event;
var bt = document.getElementById(buttonid);
if (bt){
if (evt.keyCode == 13){
bt.click();
return false;
}
}
}
</script>
We put this javascript code snippet within the head section of the design page.
Code Behind (SearchPage.aspx.cs)
//page load event handler
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//add attribute on the search textbox
//so that when enter key is pressed in the textbox,
//the search button will be fired
txtSearchBox.Attributes.Add("onkeypress", "return clickButton(event,'" + btnSearch.ClientID + "')");
}
}
//when search button is clicked
protected void btnSearch_Click(object sender, EventArgs e)
{
//my function to perform search
}
Here we add the onkeypress attribute to the textbox. When a key is pressed, the keycode will be passed to the javascript function. The javascript function checks if this is the enter key, and it is enter key then the button click is invoked by the javascript code.
So far we implemented button click on enter key press from an asp.net web control. To add a little user interactivity in the search textbox, you can implement google search like watermark effect in the search textbox. If you further want to prevent multiple postback, you can just disable asp.net button after first click and enable after postback completes.
Don't forget to expose your views via comment box beneath this post. You can freely share this post! Happy Programming!
