É impressionante o retorno gerado pela série de artigos sobre Validação de Formulários. Muitos elogios, os quais agradeço, algumas sugestões que poderão ou não ser atendidas na medida do possível e como não poderia deixar de ser, toneladas de dúvidas.

Honestamente havia decidido encerrar a série, mas devido ao grande número de pedidos, vamos esticar mais do que o seriado Lost 🙂

Uma das dúvidas campeãs é sobre o teclado numérico. É específicamente sobre isso que vamos tratar nesta primeira parte, demonstrando um código que vai acabar, de uma vez por todas, com qualquer dúvida que você tenha sobre qualquer uma das cento e tantas teclas que compõem o seu teclado.

Mas confie em mim, caro leitor: embora este código realmente vá solucionar o problema, é de vital importância que antes de tudo você entenda como o problema é solucionado.

Cada vez que nosso usuário hipotético pressiona e solta uma tecla dentro de um dos campos nos quais aplicamos a formatação, um objeto JavaScript do tipo event (evento) é disparado. Como todo o objeto, event possui diversos métodos e propriedades, mas para nossa sorte tudo o que precisamos são duas propriedades específicas. Em um mundo perfeito precisaríamos apenas de uma, mas como creio que você já sabe, somos todos vítimas da chamada Guerra dos Browsers.

No caso do Microsoft Internet Explorer, esta propriedade se chama keyCode (literalmente “código da tecla”), enquanto que para os demais browsers ela se chama which (que significa, simplesmente, “qual”, no sentido de “qual tecla foi pressionada”).

Para quem nunca teve contato com estas propriedades ou nunca entendeu bem o porque dos valores numéricos em nossas funções de formatação, é porque não conhece uma espécie de código padrão chamado ASCII. Esta sigla significa American Standard Code for Information Interchange, ou Código Padrão Americano para a Troca de Informações e existe desde os anos 60.

Existem 96 caracteres ASCII visíveis e entre eles estão todas as letras do alfabeto, os números de 0 à 9 e símbolos, como barra, contra-barra, aspas, etc… Nada mais natural, então, que cada tecla possua um código ASCII associado à ela.

A tabela ASCII completa pode ser encontrada na Wikipédia: http://pt.wikipedia.org/wiki/ASCII

Ao consultá-la você começará a entender o que significam os valores numéricos. Vamos rever uma de nossas funções de formatação, a que trata da formatação de uma data:

function fmtDate(campo, e)

{

    myVal = campo.value;

    

    if (myVal.length > 2 && !myVal.match(/\//))

    {

       myVal = '';

    }

    else

    {

        if (window.event)

        {

           keycode = window.event.keyCode;

        }

        else if (e)

        {

            keycode = e.which;

        }

        

        if (keycode < 48 || keycode > 57)

        {

            myVal = myVal.substr(0, (myVal.length - 1));

        }

        

        if (myVal.length == 2 || myVal.length == 5)

        {

            myVal += '/';

        }

    }



    campo.value = myVal;

 }

Na linha 11 desta função estamos testando pela presença da construção DOM window.event, o que indica que o browser utilizado é o Internet Explorer, enquanto que caso contrário e a propriedade which do próprio objeto do evento estiver presente estamos lidando com Firefox ou outro navegador não-compatível com o IE.

Agora observe a linha 20: bingo! É aí que estamos testando o código ASCII. Confira a tabela: os caracteres que possuem os códigos de 48 à 57 são os números de 0 à 9, portanto é apenas isso que nos basta certo? Quase. O teclado numérico possui códigos ASCII diferentes. Nele os números de 0 à 9 representam os códigos de 96 à 105, e é aí que surge a confusão: se você consultar a tabela ASCII verá que na verdade estes códigos representam as letras minúsculas. Sim, eu sei qual será sua próxima pergunta: “Como pode acontecer isso ?”.

Honestamente não possuo a resposta para esta pergunta, mas sei com absoluta certeza que o teclado numérico é representado pelos códigos de 96 à 105 e aqui está o que realmente importa: Como eu sei disto. Se já sabemos como detectar em um if se a tecla pressionada pelo usuário equivale ou não à certos caracteres é relativamente simples programarmos um script que nos mostre o código ASCII de cada tecla pressionada. Aqui está ele:

<html>

    <head>

        <title>Teste de códigos de Teclas</title>

        <script type="text/javascript">

        function showKeyCode(campo, e)

        {

            str = '';



            if (window.event) {

                kCode = window.event.keyCode;

            } else if (e) {

                kCode = e.which;

            }



           document.getElementById('td0').innerHTML = campo.value;

           document.getElementById('td1').innerHTML = kCode;



           campo.value='';

        }

        </script>

    </head>

    <body>

        <form>

            <input type="text" name="keyRead" onkeyup="showKeyCode(this, event);" /> 

            <br />

            <table width="200" style="border: 1px solid #000000;">

                <tr>

                    <th width="100" align="center">Key pressed</th>

                    <th width="100" align="center">Key Code</th>

                </tr>

                <tr>

                    <td id="td0" align="center" style="border: 1px solid #000000;"> </td>

                    <td id="td1" align="center" style="border: 1px solid #000000;"> </td>

                </tr>

            </table>

        </form>

    </body>

</html>

Observe a simplicidade do conceito: até a linha 13 nossa função é idêntica às nossas funções de formatação. A única diferença reside no fato de que, ao invés de fazer uma checagem do código ASCII eu apenas exibo ele dentro de uma div.

A partir disto você já deve ter condições de alterar o código de nossas funções de forma que, no caso da checagem de números, por exemplo, o script reconheça como números as teclas cujos códigos ASCII vão de 48 à 57 e de 96 à 105.

Boa sorte!