sexta-feira, 28 de março de 2014

Criar máscara em campos do tipo - Telefone, Data, CPF, Dinheiro | Javascript - onkeypress()

Olá pessoal, neste post vou ensinar um recurso bem útil no momento do usuário preencher algumas informações do tipo citado no título, este recurso facilita a visualização e delimitação das informações no momento do seu preenchimento. Bem depois desse resumo vamos colocar a mão na massa:

Primeiramente vamos criar o formulário e escolher algum tipo de campo para trabalhar, no exemplo utilizei o campo do tipo telefone:

<form name="formCadastro">

                    <fieldset>
                        <legend>Cadastro</legend>

                        <p><label for="telefone">Seu telefone:</label>
                            <input name="telefone" type="text" maxlength="14" size="14" onkeypress="Mascara(this);"></p>

                        <input type="submit" value="Enviar"> <input type="reset" value="Limpar" >

                    </fieldset>
                </form>

Repare nos seguintes atributos do input do telefone:

  • maxlength: delimita a quantidade de caracteres que o campo pode ter.
  • size: delimita o tamanho da caixa de input.
  • onkeypress: direciona uma ação quando o usuário digita no campo.
Veja para onde o onkeypress(Javascript) aponta: Para a função Mascara() que está implementada nesse código:

<script language="javascript">

function Mascara(objeto){ 
                if(objeto.value.length == 0)
                    objeto.value = '(' + objeto.value;

                if(objeto.value.length == 3)
                      objeto.value = objeto.value + ')';

                if(objeto.value.length == 8)
                      objeto.value = objeto.value + '-';

            }

</script>

Esta função checa o tamanho dos dados digitados pelo usuário, ou seja, verifica em qual posição o objeto se encontra e a partir disso pode-se definir onde serão inseridos os caracteres específicos de cada tipo de campo, como no exemplo eu utilizei o Telefone, então, a função vai delimitar o DDD do telefone com os parênteses e separar os 8 números em 2 partes usando o hífen. Isso foi possível concatenando os caracteres especiais junto ao que se foi digitado, isso ocorreu dentro dos IFs, repare novamente caso tenha dúvida.

Atualmente o estado de São Paulo recebeu mais um dígito na composição de seus números, então o código a cima vai mudar:

<script language="javascript">

function Mascara(objeto){ 
                if(objeto.value.length == 0)
                    objeto.value = '(' + objeto.value;

                if(objeto.value.length == 3)
                      objeto.value = objeto.value + ')';

                if(objeto.value.length == 9)
                      objeto.value = objeto.value + '-';

            }

</script>

Pronto, agora esse código atende a necessidade de São Paulo, o que poderia ser feito nesse caso seria uma chamada de funções de forma que a região do país seja informado pelo usuário, e assim definir qual função será utilizada.

As máscaras de CPF, Data e Dinheiro podem seguir a mesma lógica dessa função, mudando apenas em que momento os caracteres serão concatenados.

Bem, o post acaba por aqui, espero que de alguma forma o código seja útil para vocês =) se houver alguma dúvida ou dicas não exitem em postar. Abraço, e até a próxima.

2 comentários:

  1. Olá amigo. Muito bom tutorial, resolveu meu problema.
    A questão é que no Estado de São Paulo, temos telefone fixo com 4 dígitos= xxxx-xxxx e celular com 5 digitos= xxxxx-xxxx.
    Tem como resolver?

    ResponderExcluir
  2. Ajudou muito, obrigado! Só gostaria de saber como faço para permitir apenas números nos campos.

    ResponderExcluir