Máscara para telefone com JavaScript puro

Criando máscaras para telefone/celular com JavaScript puro

Geralmente quando desejamos mascarar um input usamos alguma biblioteca de máscara baseada em jQuery. Porém, também é possível programar essas máscaras sem a dependência de bibliotecas externas e de forma simples.

Nesse artigo vamos demonstrar uma técnica para mascarar inputs de telefone/celular com JavaScript puro usando o padrão (99) 99999-9999. E com a mesma técnica, dada as devidas adaptações, podemos mascarar outros campos como CPF/CNPJ, Cep ou data de nascimento.

Funcionamento da máscara:

O código dela:

Primeiramente no nosso HTML adicionamos um input para que o nosso usuário digite seu telefone, nesse input associamos um evento “onkeydown” ao retorno da função de máscara. Passando como parâmetro o evento gerado.

Então, na função realizamos uma checagem com expressão regular para identificar se o usuário digitou um número, se for esse o caso vamos entrar no trecho de código que aciona as regras da máscara. São elas:

• Se o DDD + Número do telefone for maior que 12, não aceitamos o novo número
• Se o DDD + Número tiver 11 dígitos realizamos a máscara completa com o padrão (99) 99999-9999
• Se o DDD + Número tiver entre 6 e 10 dígitos realizamos a máscara parcial com o padrão (99) 9999-XXXX, esse padrão se aplica a números antigos de celular que tem apenas 8 dígitos
• Se o DDD + Número tiver entre 2 e 5 dígitos realizamos a máscara parcial com o padrão (99) XXX
• Se o DDD + Número tiver 1 dígito realizamos a máscara parcial com o padrão (9

Porém, caso a tecla pressionada não seja um número entraremos em outras condições. No exemplo de código, estamos retornando um falso para quaisquer teclas que não sejam "Backspace" ou "Delete", fazendo com que a tecla pressionada não seja contabilizada no input. Neste caso, se o usuário pressionar uma letra, nada acontecerá. A tecla será ignorada.

Aqui pode entrar um pouco da sua necessidade/criatividade com o que fazer com as demais teclas, outro exemplo: podemos colocar como exceções as combinações das teclas CTRL para o usuário poder copiar, colar e recortar dados do/para o input mascarado.