Introduction: In this article I
am going to share the trick to set focus in specific textbox on page load and set specific
button as default button when pressing enter key.
In previous article i explained How to Clear or reset all asp.net controls on web page and Prevent duplicate record entry on page refresh in asp.net and Retain password value in the asp.net TextBox after postback event and Validate,upload,crop and store image in folder in asp.net using jQuery and jQuery to calculate Running Total of Asp.Net Textbox values and show in Label or TextBox control
Description: When there are multiple input controls (textbox)
and multiple buttons and we want to set focus in specific textbox. For example
we have a search option in web page having a textbox as shown in above image and we want to trigger search button on enter key press then we can achieve this using any of the following three ways:
- By setting DefaultFocus and DefaultButton property in form tag.
- By setting DefaultFocus and DefaultButton property through code in code file.
- By placing all the controls in Panel control and set its DefaultButton property
Implementation: Let’s create an
example page to see the all the three tricks in action one by one
HTML Source Code:
Design the page
as shown in image by copying the following HTML Source
Setting DefaultFocus
and DefaultButton property in form tag:
Check below HTML Source code highlighted in yellow color.
Check below HTML Source code highlighted in yellow color.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" DefaultFocus="txtSearch" DefaultButton="btnSearch">
<div>
<fieldset
style="width:230px;">
<legend>
Set Default Focus and Default
Button</legend>
<table>
<tr><td><asp:TextBox
ID="txtSearch" runat="server" ></asp:TextBox></td>
<td><asp:Button
ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /></td>
<td><asp:Button
ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
- In the code file write as:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void btnSearch_Click(object sender, EventArgs e)
protected void btnSearch_Click(object sender, EventArgs e)
{
//your search code
here
}
protected void btnCancel_Click(object
sender, EventArgs e)
{
//your cancel code
here
}
}
Setting DefaultFocus
and DefaultButton property through code in code file as:
protected void Page_Load(object sender, EventArgs e)
{
this.form1.DefaultFocus = txtSearch.ClientID;
this.Form.DefaultButton = btnSearch.UniqueID;
}
Placing all the controls in
Panel control and setting its DefaultButton property:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel
ID="Panel1" runat="server" DefaultButton="btnSearch">
<fieldset
style="width:230px;">
<legend>
Set Default Focus and Default
Button
</legend>
<table>
<tr><td><asp:TextBox
ID="txtSearch" runat="server" ></asp:TextBox></td>
<td><asp:Button
ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /></td>
<td><asp:Button
ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>
</tr>
</table>
</fieldset>
</asp:Panel>
</div>
</form>
</body>
</html>
Note: we can just set DefaultButton property in panel
and because there is no DefaultFocus property.
One point to note is that DefaultButton will only work if the focus is
in input control i.e. Textbox. So we need to set focus in textbox also to make default button work as:
- In page load event of code file write as:
protected void Page_Load(object sender, EventArgs e)
{
//Set default focus in Search textbox
this.Form.DefaultFocus = txtSearch.ClientID;
//or you can also
set focus in search textbox as:
//txtSearch.Focus();
}
Now over to you:
" I hope you
have got how to Set Default Focus in textbox and Default Button on enter key press in asp.net and If you like my work;
you can appreciate by leaving your comments, hitting Facebook like button,
following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on
stumble upon and subscribing for receiving free updates directly to your inbox
. Stay tuned and stay connected for more technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..