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

How To set Default Button for ENTER key pressed event, and How To set Focus on a particular Control when Page loads, and How To Shift Focus from One Control To Another when TAB key is pressed

Rate me:
Please Sign up or sign in to vote.
3.38/5 (6 votes)
14 Apr 2009CPOL3 min read 223K   1.1K   21   9
How to make any button on a web-form a default button for a user action like "ENTER" pressed, and how to set focus to a particular control on a web page

Introduction:


Please Note: Currently, this article applies to the stand alone pages, where there is no master-child pages concept.
In this article, we explain a very common scenario wherein a developer is required to do very common tasks, namely, setting the input focus to a web-control like a textbox among a group of web-controls on a web-page and also calling a particular button's event-handler, for example, say a "Submit" buttons event handler on an event like "ENTER" key pressed on keyboard.

Background

EXPLAINING THE SCENARIO AND WHAT ALREADY EXISTS IN PLENTY OVER THE NET :

SCENARIO:

For many web-pages which serve as collecting some data from the user, right from small web-pages which accept just two inputs like "username" and "password" to very big/exclusive web-pages like accepting "customer information", there is a common need for doing following two tasks:

1.) Setting the focus to a particular web-control among the group of web-controls on the web-page.

1.1) Programatically moving the focus from one web-control to another. for e.g. once the username is accepted shift the focus to password textbox.

2.)When the user is done with entering the data on a web-page, if he just presses ENTER KEY, a paricular button, like "Submit" button's event-handler should be called upon for processing.

COMMONLY FOUND SOLUTIONS OVER THE NET:

For Point no. 1) as above, write a javascript which works on page load and finally call a control's .Focus() method so that it can receive the focus.

For Point no. 1.1) as above, for each control's "LOSE FOCUS" event execute javascript and programatically set the focus to the next/required control by again calling that control's .Focus() method.

For Point no. 2) as above, write javascript which will tap the "KEY PRESSED EVENT" and equate the hexa-code with "ENTER" key's hexa-code and if it equates correctly do the processing accordingly.


EFFECTIVE/SIMPLE SOLUTION:

-- With .Net Framework v2.0 onwards, there exists a simple ONE LINER SOLUTION to all these issues. The solution lies with using the "DEFAULT BUTTON" and "DEFAULT FOCUS" property of the <FORM> element in a web_page and also using the TabIndex property of any WebControl.

<form id="form1" runat="server" defaultbutton="Button1" defaultfocus="TextBox1">

-- Above code-snippet will ensure that when the web-page loads "TextBox1" receives the focus by default among many of the textboxes on the web-page.
-- Also, "TabIndex" is a property available on any server side control which will accept non-negative integers and will shift the focus to the next control with incremental value of "TabIndex". This solves the issue of transfering the focus to the next control from first control by pressing "Tab" key.


<asp:TextBox ID="TextBox1" Text="Focus1" runat="server" TabIndex="1">
<asp:TextBox ID="TextBox2" Text="Focus2" runat="server" TabIndex="2">
<asp:TextBox ID="TextBox3" Text="Focus3" runat="server" TabIndex="3">
<asp:TextBox ID="TextBox4" Text="Focus4" runat="server" TabIndex="4">

As shown in the code above once the "TextBox1" has received the Focus because of defaultfocus attribute set to the form element of the web-page, next, specifying the TabIndex property of all the rest of the controls in an incremental approach ensure that the next textbox (with least incremented TabIndex value receives the focus)

Using the code


THIS CODE CAN BE USED AS IT IS AND IS VERY STRAIGHTFORWARD AND SIMPLE TO UNDERSTAND.

C#
			<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head  runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1"  runat="server" defaultbutton="Button1" defaultfocus="TextBox1">
    <div>
    <asp:TextBox ID="TextBox1" Text="Focus1" runat="server" TabIndex="1"></asp:TextBox>
    <asp:TextBox ID="TextBox2" Text="Focus2" runat="server" TabIndex="2"></asp:TextBox>
    <asp:TextBox ID="TextBox3" Text="Focus3" runat="server" TabIndex="3"></asp:TextBox>
    <asp:TextBox ID="TextBox4" Text="Focus4" runat="server" TabIndex="4"></asp:TextBox>
    <asp:Button  runat="server" ID="Button1" Text="DefaultClick-IfPressed-EnterKey" OnClick="DefaultButtonClicked"/>
    <asp:Button  runat="server" ID="Button2" Text="ClickExplicitly" OnClick="ExplicitlyClicked"/>
    </div>
    </form>
</body>
</html>		

Points of Interest


1.)We learnt some simple things like setting a focus to a control on a web-page among a group of controls can simply be achieved with a property named defaultfocus of the "form" element of the web-page.
2.)We also learnt that making a button-control's event handler to be a default event handler for a situation when an "ENTER" key is pressed can be achieved by setting the defaultbutton property of the "form" element.
3.) Moving the focus to other controls when "Tab" key is pressed can be achieved by simply specifying the "TabIndex" property of these controls in an incremental way. PleaseNote: "TabIndex" property will accept non-negative numbers and will keep shifting the focus on the controls in an incremental manner as the "TabIndex" is assigned the numeric value.

License

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


Written By
Software Developer Software Development
India India
Jitendra is a software developer, who believes, trouble-shooting skills are as important as the coding skills. He also believes that apart from technical skills a person should possess some Project Execution Skills as well to complete a project very successfully.

Comments and Discussions

 
QuestionGood Pin
sujuka wify18-Dec-13 19:29
sujuka wify18-Dec-13 19:29 
QuestionNice Pin
Kumar Atn17-Dec-13 1:05
Kumar Atn17-Dec-13 1:05 
GeneralMy vote of 1 Pin
Vladimir_V9-Apr-09 15:54
Vladimir_V9-Apr-09 15:54 
GeneralMaster page and default button Pin
Deken9-Apr-09 6:48
Deken9-Apr-09 6:48 
GeneralRe: Master page and default button Pin
Jitendra R Wadhwani11-Apr-09 2:59
Jitendra R Wadhwani11-Apr-09 2:59 
GeneralRe: Master page and default button Pin
R. Giskard Reventlov14-Apr-09 2:37
R. Giskard Reventlov14-Apr-09 2:37 
GeneralRe: Master page and default button Pin
KihoC2-Jul-09 8:47
KihoC2-Jul-09 8:47 
GeneralArticle Formatting Pin
Jeffrey Walton8-Apr-09 5:06
Jeffrey Walton8-Apr-09 5:06 
GeneralRe: Article Formatting Pin
Jitendra R Wadhwani8-Apr-09 5:40
Jitendra R Wadhwani8-Apr-09 5:40 

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.