Como definir o foco para controlos de formulário Web usando o script do lado do cliente

IMPORTANTE: Este artigo foi traduzido por um sistema de tradução automática (também designado por Machine Translation ou MT), não tendo sido portanto traduzido ou revisto por pessoas. A Microsoft possui artigos traduzidos por aplicações (MT) e artigos traduzidos por tradutores profissionais, com o objetivo de oferecer em português a totalidade dos artigos existentes na base de dados de suporte. No entanto, a tradução automática não é sempre perfeita, podendo conter erros de vocabulário, sintaxe ou gramática. A Microsoft não é responsável por incoerências, erros ou prejuízos ocorridos em decorrência da utilização dos artigos MT por parte dos nossos clientes. A Microsoft realiza atualizações freqüentes ao software de tradução automática (MT). Obrigado.

Clique aqui para ver a versão em Inglês deste artigo: 316719
Sumário
Este artigo demonstra como definir o foco para um controle de formulário da Web ASP.NET usando o script do lado do cliente.

Web Form ASP.NET controles fornecem uma aparência semelhante a HTML tradicional controla enquanto eles fornecem uma interface consistente e estruturada e mais eficientes de recursos. Além disso, você pode usar scripts do lado do cliente para melhorar a funcionalidade que fornecem esses controles.

Requisitos

A lista a seguir descreve o hardware recomendado, software, infra-estrutura de rede e service packs que você precisa:
  • Microsoft Visual Studio 2005 ou o Microsoft Visual Studio .NET
  • Serviços de informações da Internet (IIS) 5.0 ou uma versão posterior do IIS
Este artigo pressupõe que você esteja familiarizado com os seguintes tópicos:
  • Aplicativos da Web
  • ASP.NET
  • Visual Basic 2005 ou o Visual Basic .NET

Usando o script do lado do cliente no Visual Studio 2005 ou no Visual Studio .NET

Controles de formulário da Web do ASP.NET oferecem a aparência e funcionalidade dos controles HTML tradicionais gerando os elementos HTML no navegador do cliente quando a página é carregada. Mas, diferentemente das contrapartes HTML, controles de formulário Web do ASP.NET fornecem uma interface consistente e estruturada e mais recursos, como postback automático e a capacidade de gerar vários elementos HTML a partir de um único controle. Você também pode usar scripts do lado cliente com estes controlos para fornecer funcionalidade adicional, como definir o foco em um controle de formulário Web do ASP.NET.

O procedimento a seguir cria um aplicativo ASP.NET que exibe três controles ASP.NET TextBox com os controles CommandButton correspondentes para definir o foco. Esses controles CommandButton invocar JavaScript do lado cliente dinamicamente definir o foco em um controle de servidor especificado:
  1. Inicie o Visual Studio .NET ou Visual Studio 2005.
  2. Criar um novo projeto ASP.NET Web Application no Visual Basic .NET ou no Visual Basic 2005 e, em seguida, denomine ClientSideScriptExample .
  3. Alterne para o modo de exibição HTML da janela WebForm1.aspx .
  4. Na janela HTML do WebForm1 , copie e cole o código a seguir entre as marcas de formulário de abertura e fechamento. Ele exibe os dois controles TextBox com os botões de comando correspondentes:

    Observação Quando você cola o código na janela de HTML, é importante colar os segmentos de código como HTML. Para fazer isso, clique no comando Colar como HTML no menu de contexto.
                              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. Copie e cole o código a seguir em sua página. Cada botão de comando chama uma função de JavaScript do lado do cliente que define o foco em um determinado controle no formulário. Certifique-se posicionar o bloco de código antes do primeiro <body> tag:
    <script language=javascript>			function cmdButton1_Clicked()			{	document.all('txtInput1').focus();				return false;			}						function cmdButton2_Clicked()			{	document.all('txtInput2').focus();				return false;}</script>					
  6. Clique em Salvar .
  7. No menu Debug , clique em Iniciar para criar e executar o aplicativo. WebForm1 é exibido na tela. Duas caixas de entrada e dois botões de comando correspondentes são exibidos.
  8. Clique no botão InputBox 1 e o foco move para o controle txtInput1 . Clique no botão InputBox 2 . Foco é movido para o controle txtInput2 .
  9. Feche o navegador.

Verificação

  1. Clique no botão InputBox 1 para mover o foco para o controle txtInput1 .
  2. Clique no botão InputBox 2 para mover o foco para o controle txtInput2 . Esse código não deve causar uma chamada para o servidor e não deve recarregar a página.

Listagem de código completo

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" 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.0">		<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">		<meta name="vs_defaultClientScript" content="JavaScript">		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">		<script language="javascript">			function cmdButton1_Clicked()			{	document.all('txtInput1').focus();				return false;			}						function cmdButton2_Clicked()			{	document.all('txtInput2').focus();				return false;			}		</script>	</HEAD>	<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></HTML>				

REFERÊNCIAS

Para obter recursos adicionais, visite o seguinte da Microsoft:

Aviso: este artigo foi traduzido automaticamente

Propriedades

ID do Artigo: 316719 - Última Revisão: 05/21/2007 02:49:48 - Revisão: 7.8

Microsoft Visual Basic 2005, Microsoft Visual Basic .NET 2003 Standard Edition, Microsoft Visual Basic .NET 2002 Standard Edition, Microsoft ASP.NET 1.1, Microsoft ASP.NET 1.0

  • kbmt kbvs2005swept kbvs2005applies kbhowtomaster KB316719 KbMtpt
Comentários