13

Por exemplo... Quero um input exclusivo para números de telefone. Ao digitar o DDD ele automaticamente recebe os parênteses: (xx). Ao digitar o restante dos números ele divida com um hífen, por exemplo: (xx)abcd-efgh. E nos casos de estados que receberam o nono dígito, (xx)9abcd-efgh.

Como posso fazer isso?

3
  • Pelo que entendi você quer mascarar o que o usuário digita é isso? Commented 18/02/2015 às 16:37
  • Mais ou menos, tipo... Quando ele clicar no input já aparece os parenteses para colocar o ddd por exemplo, tem um type padrão para isso? Commented 18/02/2015 às 16:38
  • @Everton No caso você está querendo mascarar um input. Fiz uma edição na sua pergunta, alterando o título. Você pode revertê-la caso não apresente melhorias. Commented 18/02/2015 às 16:58

3 Respostas 3

17

Você pode mascarar um campo utilizando:

JQuery Mask Plugin
Documentação

Exemplo de uso:

$(document).ready(function(){
    $('#telefone').mask('(00) 0000-0000');
});

Ou no próprio html:

<input type="text" name="telefone" data-mask="(00) 0000-0000" data-mask-selectonfocus="true" />

Você também pode aplicar callback, em fim... há vários exemplos na documentação que se encaixam a sua necessidade..

Para casos em que o estado possua o nono dígito, você pode utilizar a mudança On-the-fly: Exemplo retirado da documentação, necessita apenas a adaptação a sua necessidade:

var options =  {onKeyPress: function(cep, e, field, options){
  var masks = ['00000-000', '0-00-00-00'];
    mask = (cep.length>7) ? masks[1] : masks[0];
  $('.crazy_cep').mask(mask, options);
}};

$('.crazy_cep').mask('00000-000', options);

Ou a solução que o @Wallace forneceu nos comentários que seria assim:

$(document).ready(function(){
    $('#telefone').mask('(00) 0000-0000#');
});

Ou também a seguinte expressão:

$(document).ready(function(){
    $('#telefone').mask('(00) 0000-00009');
});

Onde o 0 seria obrigatório e o 9 opcional;

@Wallace também citou a validação utilizando HTML5.

2
  • Para os casos onde existem o tal do "nono dígito", creio que se possa usar a expressão (00) 0000-0000# Commented 18/02/2015 às 16:48
  • Ou também a atualização da máscara On-the-fly, existe um exemplo da documentação fornecida; Vou editar a resposta para fornecer a solução também; Commented 18/02/2015 às 16:50
6

O que você está querendo pode ser feito facilmente com jQuery Mask.

O seu uso se dá exatamente como o @RafaelWithoeft descrever em sua resposta.

$(document).ready(function(){
    $('[name=telefone]').mask('(00) 0000-0000');
});

Quanto a fazer isso somente com o HTML5, o que você vai conseguir fazer no máximo é utilizar o atributo pattern. Porém este atributo não vai servir para o autopreenchimento, mas apenas para a validação do campo conforme o formato desejado.

Por exemplo, no caso de uma validação de um telefone:

<input type="text" pattern="\(\d{2}\)\d{4}-\d{4}" />
#exige que o campo seja preenchido com "(99)9999-9999"
4

Para quem quiser uma solução que não utiliza JQuery:

const tel = document.getElementById('tel') // Seletor do campo de telefone

tel.addEventListener('keypress', (e) => mascaraTelefone(e.target.value)) // Dispara quando digitado no campo
tel.addEventListener('change', (e) => mascaraTelefone(e.target.value)) // Dispara quando autocompletado o campo

const mascaraTelefone = (valor) => {
    valor = valor.replace(/\D/g, "")
    valor = valor.replace(/^(\d{2})(\d)/g, "($1) $2")
    valor = valor.replace(/(\d)(\d{4})$/, "$1-$2")
    tel.value = valor // Insere o(s) valor(es) no campo
}
<input type="tel" class="form-control" id="tel" name="tel" maxlength="15" pattern="\(\d{2}\)\s*\d{5}-\d{4}" required>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .