Mudando de TextBox com a tecla ENTER

Desde o ano passado estou tentando escrever meu primeiro artigo. Acho de extrema importância à troca de conhecimento, pois assim saímos todos ganhando: quem lê e quem ensina. E uma oportunidade surgiu pra mim, a partir de uma dúvida no fórum comunidade C# (Csharp), feita pelo Cristiano Lins, o qual perguntou como poderia pular de um TextBox para o outro clicando na tecla ENTER. A partir daí, resolvi fazer este artigo para ajudá-lo e também a outras pessoas que não saibam ainda. Espero, depois deste artigo, escrever outros focando nos iniciantes, categoria o qual me incluso, e que possamos aprender cada vez mais. Então, Vamos lá !!

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 estes dois arquivos para sua máquina:

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.

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

Até a próxima,

Michaell Dantas

Coisas complexas são criadas a partir de coisas simples.