HOW TO: 클라이언트 쪽 스크립트를 사용하여 Web Form 컨트롤로 포커스 설정

이 문서가 적용되는 제품 보기.

기술 자료 ID	:	816166
마지막 검토	:	2004년 3월 2일 화요일
수정	:	1.1

이 페이지에서

요약

요구 사항

Visual Studio .NET에서 클라이언트 쪽 스크립트 사용

확인

전체 코드 예제

참조

요약

이 문서에서는 클라이언트 쪽 스크립트를 사용하여 ASP.NET Web Form 컨트롤로 포커스를 설정하는 방법을 설명합니다.

ASP.NET Web Form 컨트롤은 기존 HTML 컨트롤과 비슷한 모양을 제공하지만 일관성 있고 구조적인 인터페이스와 더욱 안정적인 기능을 제공합니다. 또한, 클라이언트 쪽 스크립트를 사용하여 이러한 컨트롤이 제공하는 기능을 향상시킬 수 있습니다.

위로 가기

요구 사항

다음은 이 문서에 있는 절차를 수행하는 데 필요한 권장 하드웨어, 소프트웨어 및 네트워크 인프라 목록입니다

•	Visual Studio .NET
•	Microsoft Internet Information Services(IIS) 5.0 이상

이 문서에서는 사용자가 다음 항목에 대해 잘 알고 있는 것으로 가정합니다.

•	웹 응용 프로그램
•	ASP.NET
•	Visual C# .NET

위로 가기

Visual Studio .NET에서 클라이언트 쪽 스크립트 사용

ASP.NET Web Form 컨트롤은 페이지가 로드될 때 클라이언트 브라우저에 HTML 요소를 생성하여 기존 HTML 컨트롤의 모양과 기능을 제공합니다. 하지만 HTML 컨트롤과 달리 ASP.NET Web Form 컨트롤은 일관성 있고 구조적인 인터페이스와 자동 다시 게시 및 단일 컨트롤에서 여러 HTML 요소를 생성하는 기능과 같은 더욱 다양한 기능을 제공합니다. 이러한 컨트롤에서 클라이언트 쪽 스크립트를 사용하여 ASP.NET Web Form 컨트롤로 포커스를 설정하는 것 같은 기능을 추가로 제공할 수도 있습니다.

다음 절차에서는 포커스 설정을 위한 CommandButton 컨트롤이 포함된 세 가지 ASP.NET TextBox 컨트롤을 표시하는 ASP.NET 웹 응용 프로그램을 만듭니다. 이러한 CommandButton 컨트롤은 클라이언트 쪽 JavaScript를 실행하여 지정된 서버 쪽 컨트롤에서 동적으로 포커스를 설정합니다.

1.	Visual Studio .NET을 시작합니다.
2.	Visual C# .NET에서 ASP.NET 웹 응용 프로그램 프로젝트를 새로 만든 다음 ClientSideScriptExample이라는 이름을 지정합니다.
3.	WebForm1.aspx 창의 HTML 보기로 전환합니다.
4.	WebForm1의 HTML 창에서 다음 코드를 복사하여 여는 폼 태그와 닫는 폼 태그 사이에 붙여 넣습니다. 해당하는 명령 단추가 포함된 두 가지 TextBox 컨트롤이 표시됩니다. 중요 HTML 창에 코드를 붙여 넣을 때 HTML로 코드를 붙여 넣으십시오. 붙여 넣을 위치를 마우스 오른쪽 단추로 누른 다음 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()">`
5.	다음 코드를 복사하여 페이지에 붙여 넣습니다. 각 명령 단추는 폼에서 특정 컨트롤로 포커스를 설정하는 클라이언트 쪽 JavaScript 함수를 실행합니다. 첫 번째 <BODY> 태그 앞에 코드 블록을 삽입해야 합니다.`<script language=javascript> function cmdButton1_Clicked() { Form1.txtInput1.focus(); return false; } function cmdButton2_Clicked() { Form1.txtInput2.focus(); return false; } </script>`
6.	다음 코드를 복사하여 페이지에 붙여 넣습니다. 첫 번째 </BODY> 태그 앞에 코드 블록을 삽입해야 합니다.`<body onload="Form1.txtInput1.focus( )" > </body>`
7.	저장을 누릅니다.
8.	디버그 메뉴에서 시작을 눌러 응용 프로그램을 빌드하고 실행합니다. WebForm1이 화면에 표시됩니다. 입력 상자 두 개와 해당하는 명령 단추 두 개가 표시됩니다.
9.	InputBox 1을 누르면 포커스가 txtInput1 컨트롤로 이동합니다. InputBox 2를 누르면 포커스가 txtInput2 컨트롤로 이동합니다.
10.	브라우저를 닫습니다.

위로 가기

확인

1.	InputBox 1을 눌러 txtInput1 컨트롤로 포커스를 이동합니다.
2.	InputBox 2를 눌러 txtInput2 컨트롤로 포커스를 이동합니다. 이 코드에서는 서버에 대한 호출을 하지 않고 페이지를 다시 로드하지 않습니다.

위로 가기

전체 코드 예제

<%@ 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>

위로 가기

참조

자세한 내용은 다음 Microsoft 웹 사이트를 참조하십시오.

Focus 메서드:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/focus.asp (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/focus.asp)
ASP.NET의 코드 블록:
http://msdn.microsoft.com/library/en-us/cpguide/html/cpconcodeblocks.asp (http://msdn.microsoft.com/library/en-us/cpguide/html/cpconcodeblocks.asp)

Microsoft 제품 관련 기술 전문가들과 온라인으로 정보를 교환하시려면 Microsoft 뉴스 그룹 (http://support.microsoft.com/newsgroups/default.aspx)에 참여하시기 바랍니다.

위로 가기

본 문서의 정보는 다음의 제품에 적용됩니다.

•	Microsoft Visual C# .NET 2002 Standard Edition
•	Microsoft ASP.NET 1.0
•	Microsoft Visual C# .NET 2003 Standard Edition
•	Microsoft ASP.NET 1.1

위로 가기

키워드:	kbhowtomaster kbwebforms kbforms kbctrl KB816166

위로 가기

엔돌슨의 IT이야기

HOW TO: 클라이언트 쪽 스크립트를 사용하여 Web Form 컨트롤로 포커스 설정

이 페이지에서

요약

요구 사항

Visual Studio .NET에서 클라이언트 쪽 스크립트 사용

확인

전체 코드 예제

참조

본 문서의 정보는 다음의 제품에 적용됩니다.

키워드:

티스토리툴바

HOW TO: 클라이언트 쪽 스크립트를 사용하여 Web Form 컨트롤로 포커스 설정

이 페이지에서

요약

요구 사항

Visual Studio .NET에서 클라이언트 쪽 스크립트 사용

확인

전체 코드 예제

참조

본 문서의 정보는 다음의 제품에 적용됩니다.

키워드:

관련글

티스토리툴바