How to set focus to Web Form controls by using client-side script in Visual C#

View products that this article applies to.

Summary

This article describes how to set focus to an ASP.NET Web Form control by using client-side script.

ASP.NET Web Form controls provide a similar appearance to the conventional HTML controls while they provide a consistent and structured interface and more robust features. Additionally, you can use client-side scripting to enhance the functionality that these controls provide.

Requirements

The following items describe the recommended hardware, software, and network infrastructure that are required to perform the procedures in this article:

Visual Studio .NET or Visual Studio 2005
Microsoft Internet Information Services (IIS) 5.0 (or later)

This article also assumes that you are familiar with the following:

Web applications
ASP.NET
Visual C# .NET or Visual C# 2005

Using Client-Side Script with Visual Studio .NET or Visual Studio 2005

ASP.NET Web Form controls offer the appearance and functionality of the conventional HTML controls by generating the HTML elements on the client browser when the page is loaded. But unlike the HTML counterparts, ASP.NET Web Form controls provide a consistent and structured interface and more features, such as automatic postback and the ability to generate multiple HTML elements from a single control. You can also use client-side scripting with these controls to provide additional functionality, such as setting the focus on an ASP.NET Web Form control.

The following procedure creates an ASP.NET Web application that displays three ASP.NET TextBox controls with the corresponding CommandButton controls for setting their focus. These CommandButton controls run client-side JavaScript to dynamically set focus on a specified server-side control:

Start Visual Studio .NET or Visual Studio 2005.
Create a new ASP.NET Web Application project in Visual C# .NET or in Visual C# 2005, and then name it ClientSideScriptExample.
Switch to the HTML view of the WebForm1.aspx window.

In the HTML window of WebForm1, copy and paste the following code between the opening and closing form tags. It displays the two TextBox controls with the corresponding command buttons:

Important When you paste the code in the HTML window, paste the code segments as HTML (right-click and then click Paste as HTML).

InputBox 1:
<asp:TextBox ID="txtInput1" Runat="server" Width="50" />
    <br>
InputBox 2:
<asp:TextBox ID="txtInput2" Runat="server" Width="50" />
    <br>
    <br>
     Click a button to set focus on the specified control:<br>
<input ID="cmdButton1" type="button" value="InputBox 1" 
    OnClick="return cmdButton1_Clicked()">
<input ID="cmdButton2" type="button" value="InputBox 2" 
    OnClick="return cmdButton2_Clicked()">

Copy and paste the following code in your page. Each command button runs a client-side JavaScript function that sets focus on a particular control on the form. Make sure that you position the code block before the first <BODY> tag:
<script language=javascript> function cmdButton1_Clicked() { form1.txtInput1.focus(); return false; } function cmdButton2_Clicked() { form1.txtInput2.focus(); return false; } </script>
Copy and paste the following code in your page. Make sure that you position the code block before the first </BODY> tag:
<body onload="form1.txtInput1.focus( )" > </body>
Click Save.
On the Debug menu, click Start to build and run the application. WebForm1 is displayed on the screen. Two input boxes and two corresponding command buttons are displayed.
Click InputBox 1 and the focus moves to the txtInput1 control. Click the InputBox 2. Focus moves to the txtInput2 control.
Close the browser.

Verification

Click InputBox 1 to shift focus to the txtInput1 control.
Click InputBox 2 to shift focus to the txtInput2 control. You can expect this code to not cause a call to the server and to not reload the page.

Complete Code Listing

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ClientSideScriptExample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

<html>
  <head>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </head>
  	<script language=javascript>
			function cmdButton1_Clicked()
			{	document.all('txtInput1').focus();
				return false;
			}
			
			function cmdButton2_Clicked()
			{	document.all('txtInput2').focus();
				return false;
}
</script>
  <body MS_POSITIONING="GridLayout">
	
    <form id="form1" method="post" runat="server">
		                          InputBox 1:
			<asp:TextBox ID="txtInput1" Runat="server" Width="50" />
			<br>
			InputBox 2:
			<asp:TextBox ID="txtInput2" Runat="server" Width="50" />
			<br>
			<br>
			Click a button to set focus on the specified control:<br>
			<input ID="cmdButton1" type="button" value="InputBox 1" 
OnClick="return cmdButton1_Clicked()">
<input ID="cmdButton2" type="button" value="InputBox 2" 
OnClick="return cmdButton2_Clicked()">
    </form>
	
  </body>
<body onload="form1.txtInput1.focus( )" >
</body>
</html>

Note The code that is generated in Visual Studio 2005 is different from the code that is generated in Visual Studio .NET.

↑ Back to the top