Skip to main content
1 de 5
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42

Sempre utilizo essa funçãozinha que vou deixar aqui na resposta. Ela dispensa o uso de plugins e é feita com um simples jQuery.

Serve para CPF, CNPJ e outros diversos tipos de formatações que você quiser. Você pode até mesmo criar sua formatação própria, de acordo com sua necessidade. Assim como eu fiz com "INSCRIÇÃO ESTADUAL" quando precisei.

function MascaraInteiro(num) {
  var er = /[^0-9/ ().-]/;
  er.lastIndex = 0;
  var campo = num;
  if (er.test(campo.value)) { ///verifica se é string, caso seja então apaga
    var texto = $(campo).val();
    $(campo).val(texto.substring(0, texto.length - 1));
    return false;
  } else {
    return true;
  }
}

//formata de forma generica os campos
function formataCampo(campo, Mascara) {
  var boleanoMascara;

  var exp = /\-|\.|\/|\(|\)| /g
  var campoSoNumeros = campo.value.toString().replace(exp, "");
  var posicaoCampo = 0;
  var NovoValorCampo = "";
  var TamanhoMascara = campoSoNumeros.length;
  for (var i = 0; i <= TamanhoMascara; i++) {
    boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".") ||
      (Mascara.charAt(i) == "/"))
    boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(") ||
      (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " "))
    if (boleanoMascara) {
      NovoValorCampo += Mascara.charAt(i);
      TamanhoMascara++;
    } else {
      NovoValorCampo += campoSoNumeros.charAt(posicaoCampo);
      posicaoCampo++;
    }
  }
  campo.value = NovoValorCampo;
  ////LIMITAR TAMANHO DE CARACTERES NO CAMPO DE ACORDO COM A MASCARA//
  if (campo.value.length > Mascara.length) {
    var texto = $(campo).val();
    $(campo).val(texto.substring(0, texto.length - 1));
  }
  //////////////
  return true;
}

function MascaraMoeda(i) {
  var v = i.value.replace(/\D/g, '');
  v = (v / 100).toFixed(2) + '';
  v = v.replace(".", ",");
  v = v.replace(/(\d)(\d{3})(\d{3}),/g, "$1.$2.$3,");
  v = v.replace(/(\d)(\d{3}),/g, "$1.$2,");
  i.value = v;

}

function MascaraGenerica(seletor, tipoMascara) {
  setTimeout(function() {
    if (MascaraInteiro(seletor)) {
      if (tipoMascara == 'CPFCNPJ') {
        if (seletor.value.length <= 14) { //cpf
          formataCampo(seletor, '000.000.000-00');
        } else { //cnpj
          formataCampo(seletor, '00.000.000/0000-00');
        }
      } else if (tipoMascara == 'DATA') {
        formataCampo(seletor, '00/00/0000');
      } else if (tipoMascara == 'CEP') {
        formataCampo(seletor, '00.000-000');
      } else if (tipoMascara == 'TELEFONE') {
        formataCampo(seletor, '(00) 0000-0000');
      } else if (tipoMascara == 'CELULAR') {
        formataCampo(seletor, '(00) 00000-0000');
      } else if (tipoMascara == 'INTEIRO') {
        formataCampo(seletor, '00000000000');
      } else if (tipoMascara == 'CPF') {
        formataCampo(seletor, '000.000.000-00');
      } else if (tipoMascara == 'CNPJ') {
        formataCampo(seletor, '00.000.000/0000-00');
      } else if (tipoMascara == 'INSCRICAOESTADUAL') {
        formataCampo(seletor, '00.000.00-0');
      }
    }
  }, 200);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><b>CNPJ:</b> </label>
<input onKeyPress="MascaraGenerica(this, 'CNPJ');" type="text">
<br><br>

<label><b>CPF:</b> </label>
<input onKeyPress="MascaraGenerica(this, 'CPF');" type="text">
<br><br>

<label><b>CEP:</b> </label>
<input onKeyPress="MascaraGenerica(this, 'CEP');" type="text">
<br><br>

<label><b>MOEDA:</b> </label>
<input onKeyPress="MascaraMoeda(this);" type="text">

<label><b>CELULAR:</b> </label>
<input onKeyPress="MascaraGenerica(this, 'CELULAR');" type="text">
<br><br>

<label><b>TELEFONE:</b> </label>
<input onKeyPress="MascaraGenerica(this, 'TELEFONE');" type="text">
<br><br>

<label><b>INSCRIÇAÕ ESTADUAL:</b> </label>
<input onKeyPress="MascaraGenerica(this, 'INSCRICAOESTADUAL');" type="text">
<br><br>

Assim que eu achar o site onde peguei essa função, prometo referenciar aqui. Espero que ajude!

Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42