10

Preciso criar uma Mask (máscara) nos formulários de contato de telefone que mostre o seguinte resultado no formulário (00) 0 0000 - 0000 em JavaScript sem o uso do Jquery.

    <div class="row clearfix">
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
            <label for="contato">Contato</label>
        </div>
        <div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
            <div class="form-group">
                <div class="form-line">
                    <input type="text" id="contato" name="contato" class="form-control" required>
                </div>
            </div>
        </div>
    </div>
5
  • Já tem uma biblioteca pronta pra isso: github.com/vanilla-masker/vanilla-masker 5/12/2018 às 14:00
  • A sua pergunta não está clara. Você não explicou que tipo de mask, um exemplo de mask, qual o resultado esperado. 5/12/2018 às 14:04
  • 1
    Editei a pergunta, talvez isso possa te ajudar a entender a questão. 5/12/2018 às 14:07
  • Veja a minha resposta !!! 5/12/2018 às 14:19
  • Obrigado pessoal, ambas as respostas solucionaram o meu problema. Obrigado. 5/12/2018 às 15:51

3 Respostas 3

12

Tenho alguns exemplos aqui. O de telefone está incluso.

A chamada no html fica algo como:

<input onkeypress="mascara(this, telefone)" maxlength="15" placeholder="(__) _____-____" type="text">

E o javascript:

function numberToReal(numero) {
    var numero = numero.toFixed(2).split('.');
    numero[0] = "R$ " + numero[0].split(/(?=(?:...)*$)/).join('.');
    return numero.join(',');
}

function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function leech(v){
    v=v.replace(/o/gi,"0")
    v=v.replace(/i/gi,"1")
    v=v.replace(/z/gi,"2")
    v=v.replace(/e/gi,"3")
    v=v.replace(/a/gi,"4")
    v=v.replace(/s/gi,"5")
    v=v.replace(/t/gi,"7")
    return v
}
function soNumeros(v){
    return v.replace(/\D/g,"")
}
function telefone(v){
    v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
    v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
    return v
}
function cpf(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
                                             //de novo (para o segundo bloco de números)
    v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") //Coloca um hífen entre o terceiro e o quarto dígitos
    return v
}
function cep(v){
    v=v.replace(/D/g,"")                //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2") //Esse é tão fácil que não merece explicações
    return v
}function soNumeros(v){
    return v.replace(/\D/g,"")
}
function telefone(v){
    v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
    v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
    return v
}
function cpf(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
                                             //de novo (para o segundo bloco de números)
    v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") //Coloca um hífen entre o terceiro e o quarto dígitos
    return v
}
function mdata(v){
    v=v.replace(/\D/g,"");
    v=v.replace(/(\d{2})(\d)/,"$1/$2");
    v=v.replace(/(\d{2})(\d)/,"$1/$2");

    v=v.replace(/(\d{2})(\d{2})$/,"$1$2");
    return v;
}
function mcc(v){
    v=v.replace(/\D/g,"");
    v=v.replace(/^(\d{4})(\d)/g,"$1 $2");
    v=v.replace(/^(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3");
    v=v.replace(/^(\d{4})\s(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3 $4");
    return v;
}
0
8

Já tem biblioteca vanilla-masker pronta para isso e veja em codepen.io.

No seu caso veja um exemplo de código a seguir:

function inputHandler(masks, max, event) {
    var c = event.target;
    var v = c.value.replace(/\D/g, '');
    var m = c.value.length > max ? 1 : 0;
    VMasker(c).unMask();
    VMasker(c).maskPattern(masks[m]);
    c.value = VMasker.toPattern(v, masks[m]);
}

var telMask = ['(99) 9999-99999', '(99) 9 9999-9999'];
var tel = document.querySelector('#tel');
VMasker(tel).maskPattern(telMask[0]);
tel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);

Veja resultado:

inserir a descrição da imagem aqui

6

O código é bem simples e não precisa de nenhuma biblioteca, e mostra o resultado enquanto o usuário esta digitando.

Eu fiz usando como exemplo o CPF.

document.addEventListener('keydown', function(event) { //pega o evento de precionar uma tecla
  if(event.keyCode != 46 && event.keyCode != 8){//verifica se a tecla precionada nao e um backspace e delete
    var i = document.getElementById("CPF").value.length; //aqui pega o tamanho do input
    if (i === 3 || i === 7) //aqui faz a divisoes colocando um ponto no terceiro e setimo indice
      document.getElementById("CPF").value = document.getElementById("CPF").value + ".";
    else if (i === 11) //aqui faz a divisao colocando o tracinho no decimo primeiro indice
      document.getElementById("CPF").value = document.getElementById("CPF").value + "-";
  }
});
<input id="CPF" maxlength="14" placeholder="CPF">

E caso queira que o usuário digite somente números. Vc pode adicionar inputmode="numeric" à tag input. E inserir o código JavaScript abaixo.

document.getElementById("CPF").addEventListener("input", function() {
  var i = document.getElementById("CPF").value.length;
  var str = document.getElementById("CPF").value
  if (isNaN(Number(str.charAt(i-1)))) {
    document.getElementById("CPF").value = str.substr(0, i-1)
  }
});
document.addEventListener('keydown', function(event) { 
  if(event.keyCode != 46 && event.keyCode != 8){
  var i = document.getElementById("CPF").value.length;
  if (i === 3 || i === 7)
    document.getElementById("CPF").value = document.getElementById("CPF").value + ".";
  else if (i === 11) 
    document.getElementById("CPF").value = document.getElementById("CPF").value + "-";
  }
});
<input id="CPF" type="text" inputmode="numeric" placeholder="CPF" maxlength="14">

Tenho um novo exemplo de máscara no Codepen

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 .