0

Quando se digita um valor, ha alguma forma de ja efetuar a correção inserindo virgulas e pontos ao vivo??

EX: pressionei 4 + 3 + 6 no teclado Input ja mosta = 4,36

EX: pressionei 4 + 3 + 6 + 8 + 8 + 8 no teclado Input ja mosta = 4.368.88

Consegui fazer usando o plugin mask do jquery, mas gostaria de saber se é possível usando jquery, sem plugins.

$( '#preco' ).keyup( function() {
   $('#preco').mask("#.###,##", {reverse: true});
});

4 Respostas 4

1

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.

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

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.

Segue o link para futura consulta: Github

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

Espero que ajude!

0

Você pode utilizar o JQuery.mask e passar o formato que você deseja, exemplo:

$('.classeNoInput').mask("#.##0,00", {reverse: true});

Segue o link da documentação

Essa solução serve para outros formatos também como data, cep, telefone e etc.

2
  • a parte ao vivo nao funciona usando ele $( '#preco' ).keyup( function() { $('#preco').mask("#.###,##", {reverse: true}); }); Commented 16/01/2018 às 19:41
  • nao tem necessidade de usar keyup, ele faz automaticamente, só precisa aplicar a mascara no input Commented 17/01/2018 às 13:56
0

**Use a biblioteca

jquery e jquery.maskMoney.min.js

**

No seu script fica : **

$("#valorPrimeiroPedido").maskMoney({
        prefix: "R$:",
        decimal: ",",
        thousands: "."
    });

no Html

<input class="form-control" type="text" id="valorPrimeiroPedido"  />
0

Fala Arsom, tudo beleza? (:

Cara, não sei como faria com jQuery, porém no JavaScript puro a partir do ECMAScript 6 tem uma funcionalidade especifica para fazer essa conversão, e ela tem alguns atributos bem bacanas. Segue o exemplo:

Primeiro eu declaro uma variável, que vai receber o valor em dinheiro (no nosso exemplo, 1.000,00).

var din = 1000;

Depois disso, vou invocar a funcionalidade que vai realizar essa conversão, passando a nossa variável declarada acima por parâmetro:

new Intl.NumberFormat('pt-BR',
  { style: 'currency', currency: 'BRL' }
).format(din); // "R$ 1.000,00"

Pronto! A função vai retornar o valor formatado e convertido em Reais. (:

Você pode alterar os atributos para converter para outras moedas do mundo todo. E não tem problema você usar junto com seu código em jQuery, afinal, no fim das contas é tudo JavaScript. XD

Se quiser saber um pouco mais sobre, vou deixar aqui o link do artigo que eu li falando sobre, segue: https://www.samanthaming.com/tidbits/30-how-to-format-currency-in-es6/

Espero ter ajudado, abração!

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 .