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.

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{

}

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

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

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.