Artigos .NET Mudando de TextBox com a tecla ENTER

Este artigo tem a finalidade de explicar como 
um usuário poderá pular de um TextBox para o outro clicando na tecla ENTER. De uma forma simples e objetiva, vamos fazer passo a passo esta tarefa que é bastante fácil.
 
Primeiramente, abra o o Visual Studio (estou usando o 2008, mas pode usar o 2010 quem já tiver) e crie um novo projeto, clicando em FILE > NEW > PROJECT (Figura 01). Na janela que se abre, escolha a linguagem C# e projeto do tipo WEB. Dê o nome que quiser e depois clique em OK (Figura 2).


Figura 1.


Figura 2.


Após isso, na página Default.aspx, coloque três TextBox, a partir da aba Toolbox (Figura 3). Caso não esteja vendo a toolbox, pressione Ctrl + Alt + X.



Figura 3.


Com o botão direito do mouse, clique no projeto na aba Solution Explorer e adicione um novo item (Figura 4). Caso não esteja visualizando a aba Solution Explorer, pressione Ctrl + Alt + L.


Figura 4.


Na janela que se abre, escolha um arquivo do tipo Style Sheet, e dê o nome de Style.css. Ele será nosso arquivo CSS para formatação dos TextBox. (Figura 5).


Figura 5


Com o arquivo Style.css aberto, apague tudo que estiver escrito nele, e coloque o código a seguir:

.txt{

background-color: #fff;
border: 1px solid #AFCF40;
font-family: tahoma, arial,verdana;
font-size:12px;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
color: #232323;
font-weight: normal;
text-transform:uppercase;
height:22px;
padding:5px 0 0 5px;
}
.txt-hover {
background-color: #E8FFB7;
border: 1px solid #618C04;
font-family: tahoma, arial,verdana;
font-size:12px;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
color: #232323;
font-weight: normal ;
height:22px;
padding:5px 0 0 5px;
}

Após isso, salve e feche o arquivo Style.css.


No código acima, criamos duas classes CSS. Uma chamada ".txt", que formata os TextBox quando são renderizados no browser ou quando o cursor não estiver neles. A outra classe "txt-hover" que formata-os quando estiverem clicados.

Agora, na parte de baixo da página Default.aspx, clique em Source para abrirmos o seu HTML. Vamos referenciar nosso arquivo Style.css à página, digitando o código abaixo entre as tags HEAD. (Figura 6)

Figura 6.


Ainda no HTML da página, nos controles TextBox, adicione em todos eles o seguinte código: CssClass="txt". Veja como fica o código (Figura 7):


Figura 7.


Ok !! Se você for na parte de Design dá página, já notará a diferença dos TextBox, pois eles estão sendo modificados através do nosso arquivo CSS (Style.css). Veja a Figura 8:


Figura 8.


Bom, agora vamos fazer o cursor pular de um TextBox para o outro usando a tecla ENTER. Para isso, usarei JavaScript e JQuery. Então, antes de tudo, baixe o projeto completo em anexo e pegue os dois arquivos abaixo que estão dentro dele.

util.js

jquery.js

O primeiro, chamado util.js, é um arquivo JavaScript que contém um método que varre a página .aspx e procura todos os TextBox com a referência para eles. No nosso caso, a referência é o nome da classe lá no nosso arquivo CSS, chamada "txt". O outro método, ainda nesse arquivo, faz o cursor pular para o outro TextBox, quando a tecla ENTER for pressionada. Nesse arquivo, usamos o JQuery. Por isso, é preciso baixar o segundo arquivo, jquery.js.


Bom, com estes dois arquivos baixados, vamos adicioná-los ao nosso projeto. Clique com o botão direito no projeto, na Solucion Explorer, depois em ADD e depois EXISTING ITEM. Escolha os dois arquivos citados a cima que você salvou na sua máquina. veja a Figura 9:


Figura 9.


Pronto!! Para finalizar, precisamos apenas referenciar estes dois arquivos à página Default.aspx. Vá novamente ao HTML da página e entre as tags HEAD, adicione as seguintes referencias, conforme a Figura 10. Lembrando que a linha que referencia o jquery.js tem que estar primeiro que os outros.


Figura 10.


Agora é só rodar e ver o resultado (Figura 11).


Figura 11.


Tenho certeza que existem muitas maneiras de se fazer isso. Caso alguém saiba mais algumas, posta pra gente, que com certeza será muito bem vinda.

E quem quiser o projeto completo, pode baixar clicando aqui.

Bom, espero que tenham gostado e um grande abraço a todos.

Aprofunde seus conhecimentos sobre esse tema na comunidade ASP.NET

Aprofunde seus conhecimentos sobre esse tema na comunidade C#

Até a próxima,

Michaell Dantas
Coisas complexas são criadas a partir de coisas simples.(Michaell Dantas)