Para isso, em sua ASPX, dentro da tag head crie uma função que irá fazer essa limitação, como ilustra a Listagem 01.
Listagem 01 – Função para permitir somente números
<script type="text/javascript">
function PermiteSomenteNumeros(event) {
var charCode = (event.which) ? event.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
< /script>
No TextBox chame a função pelo evento onkeypress, como ilustra a Listagem 02.Listagem 02 – Chamada a função no TextBox
<asp:TextBox ID="txtProduto" runat="server"
onkeypress="return PermiteSomenteNumeros(event);" />
O evento onkeypress é “chamado” a cada novo caracter inserido pelo usuário no TextBox. Faça os testes e tente incluir letras.A próxima função é muito útil, com ela conseguimos recuperar o valor de um TextBox e atribuirmos outro valor qualquer a ele.
A Listagem 03 exibe esta função.
Listagem 03 – Recuperando o ID do controle
<script type="text/javascript">
function RecuperandoValorControle() {
var controle = document.getElementById(" < %=txtProduto.ClientID% > ")
alert(controle.value);
}
< /script>
Agora input para chamar esta função (se você precisar usar um controle ASP.NET como o asp:Button, não fará sentido utilizar a função Javascript, concorda?), como ilustra a Listagem 04.Listagem 04 – Chamada a função da Listagem 03
<input type="button" onclick="RecuperandoValorControle()"
value="Recuperar Valor" />
Faça o teste agora inserindo um valor no TextBox e clicando no botão criado. A Figura 01 exibe o resultado.Figura 01 – Valor recuperado do TextBox
Finalizando crie um TextBox e insira um valor padrão a sua propriedade Text. A ideia é que, ao clicar no TextBox, o texto suma e, ao clicar fora dele, o texto retorne.
Esse é um exemplo muito comum em sites de compras com campos de busca, por exemplo.
A Listagem 05 ilustra a função que montará essa lógica, e a Listagem 06 mostra o controle ASP.NET com a chamada a função.
Listagem 05 – Função para exibir/limpar valores do TextBox
<script type="text/javascript">
function ExibindoOcultandoValor(valor) {
var controle = document.getElementById(" < %=txtValor.ClientID% > ")
if (valor == '1') {
controle.value = '';
}
else {
controle.value = 'Valor Padrão';
}
}
</script>
Listagem 06 – Chamada a função no TextBox
<asp:TextBox ID="txtValor" runat="server" Text="Valor Padrão"
onblur="ExibindoOcultandoValor('0')" onfocus="ExibindoOcultandoValor('1')" />
Note que no controle é usado os eventos onfocus e onblur, que são acionados quando se clica no controle e quando clica fora dele, respectivamente.Faça os testes clicando no TextBox e fora dele.
Com estas pequenas dicas conseguimos explorar um pouco do poder do Javascript e aprender basicamente como é simples de integrarmos seu uso com aplicações ASP.NET.
Assim finalizo o artigo. Muito obrigado a todos!
Um abraço, e até o próximo artigo.
Wellington Balbo de Camargo
wellingtonbalbo@gmail.com