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á !!
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{
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;
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;
.txt-hover {
background-color: #E8FFB7;
border: 1px solid #618C04;
font-weight: normal ;
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.
Richard Mueller edited Revision 1. Comment: Removed tags "visual" and "studio", added tag "Visual Studio".