dê seu feedback
post favorito
Mudando de TextBox com a tecla ENTER
Tutorial simples explicando como fazer para pular de um TextBox para outro usando a tecla ENTER no Asp.NET.
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;
}
.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.
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.
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)
0 COMENTÁRIO
Estudo comparativo entre banco de dados IBM Informix e Microsoft SQL
Space do autor
2
0
Conheça os planos de créditos DevMedia e visualize esse post agora mesmo!