Artigos .NET Exemplos Práticos com Javascript em Aplicações ASP.NET
Inicialmente veremos como limitar um campo texto para receber apenas caracteres numéricos.

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