20 de fev de 2014

Máscara para preenchimento de telefone em javascript

Sabe quando você vai digitar seu telefone em algum formulário, e automaticamente é inserido um parênteses antes e depois do código de área, e um tracinho no meio do telefone, sem que você digite? Isso acontece graças a uma função simples de se fazer em javascript, veja abaixo o html e o javascript comentados.

Html

Telefone:  


Javascript

function mascara(telefone){ 
   if(telefone.value.length == 0)
     telefone.value = '(' + telefone.value; //quando começamos a digitar, o script irá inserir um parênteses no começo do campo.
   if(telefone.value.length == 3)
      telefone.value = telefone.value + ') '; //quando o campo já tiver 3 caracteres (um parênteses e 2 números) o script irá inserir mais um parênteses, fechando assim o código de área.

 if(telefone.value.length == 8)
     telefone.value = telefone.value + '-'; //quando o campo já tiver 8 caracteres, o script irá inserir um tracinho, para melhor visualização do telefone.
 
}


4 comentários:

  1. amigo, a sua mascara esta muito simples e não está funcional... você não fez nenhum tratamento para ele permitir apenas números... mas de qualquer forma, muito obrigado por disponibilizar o seu tempo postando o seu exemplo.

    ResponderExcluir
    Respostas
    1. Obrigado pelo comentário, sinta-se a vontade para postar melhorias.

      Att.

      Excluir
    2. Testei aqui o código e funcionou de boa.

      Excluir
  2. Obrigado pelo post simples, direto e certo.

    ResponderExcluir