Skip to main content
adicionou 127 caracteres ao conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42

Segue o link para futura consulta: Github

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

Espero que ajude!

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

Segue o link para futura consulta: Github

Assim que eu achar o site onde achei essa função, prometo referenciar aqui.

Espero que ajude!

adicionou 169 caracteres ao conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42

O código dá resposta poderia ter ficado bem menor, se eu respondesse só a questão levantada na pergunta. Mas eu preferi deixar a resposta mais completa e abrangente.

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

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

O código dá resposta poderia ter ficado bem menor, se eu respondesse só a questão levantada na pergunta. Mas eu preferi deixar a resposta mais completa e abrangente.

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

adicionou 626 caracteres ao conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42
//Essa função é para verificar se o valor passado pelo input é String. Se for String não é aceito (é apagado)
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;
  }
}

//formataFormata de forma generica os campos (Essa é a função que realmente formata os campos, com a exceção do campo de MOEDA)
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;
}

//Essa função é para o caso da formatação ser em MOEDA. Entao você deverá chamá-la no INPUT.
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;

} 

//O segundo parâmetro desta função, é o nome que você coloca lá na chamada dela no INPUT. Isso determina em qual condicional (if, else if, else) a função entrará e qual formatação ela executará.
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 style="color:green"><b>MOEDA:</b> </label>
<input onKeyPress="MascaraMoeda(this);" type="text">
<br><br>

<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>

Evento keypress -> O evento keypress é disparado quando uma tecla que produz um valor do tipo caractere é pressionada.

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 style="color:green"><b>MOEDA:</b> </label>
<input onKeyPress="MascaraMoeda(this);" type="text">
<br><br>

<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>
//Essa função é para verificar se o valor passado pelo input é String. Se for String não é aceito (é apagado)
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 (Essa é a função que realmente formata os campos, com a exceção do campo de MOEDA)
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;
}

//Essa função é para o caso da formatação ser em MOEDA. Entao você deverá chamá-la no INPUT.
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;

} 

//O segundo parâmetro desta função, é o nome que você coloca lá na chamada dela no INPUT. Isso determina em qual condicional (if, else if, else) a função entrará e qual formatação ela executará.
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 style="color:green"><b>MOEDA:</b> </label>
<input onKeyPress="MascaraMoeda(this);" type="text">
<br><br>

<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>

Evento keypress -> O evento keypress é disparado quando uma tecla que produz um valor do tipo caractere é pressionada.

adicionou 34 caracteres ao conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42
Carregando
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42
Carregando