Please disable your adblock and script blockers to view this page
 

Set DefaultButton for enter key press and DefaultFocus in textbox on page load in asp.net

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.

Set DefaultFocus in textbox and DefaultButton on enter key press in asp.net
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:
  1.  By setting DefaultFocus and DefaultButton property in form tag.
  2.  By setting DefaultFocus and DefaultButton property through code in code file.
  3.  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.


<%@ 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)
    {
        //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."
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon