3

Tenho um código que formata os valores para moeda brasileira (BRL) que funciona muito bem, porém preciso que ela limite a quantidade de números até 15 dígitos. Onde tenho que colocar essa validação?

// parâmetros da função moeda (pelo que entendi)
// a = objeto do input // e = separador milésimo
// r = separador decimal // t = evento

function moeda(a, e, r, t) {
   let n = "",
      h = j = 0,
      u = tamanho2 = 0,
      l = ajd2 = "",
      o = window.Event ? t.which : t.keyCode;
   if (13 == o || 8 == o)
      return !0;
   if (n = String.fromCharCode(o),
      -1 == "0123456789".indexOf(n))
      return !1;
   for (u = a.value.length,
      h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++);
   for (l = ""; h < u; h++) - 1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h));
   if (l += n, 0 == (u = l.length) && (a.value = ""), 1 == u && (a.value = "0" + r + "0" + l), 2 == u && (a.value = "0" + r + l), u > 2) {
      for (ajd2 = "",
         j = 0,
         h = u - 3; h >= 0; h--)
         3 == j && (ajd2 += e,
            j = 0),
         ajd2 += l.charAt(h),
         j++;
      for (a.value = "",
         tamanho2 = ajd2.length,
         h = tamanho2 - 1; h >= 0; h--)
         a.value += ajd2.charAt(h);
      a.value += r + l.substr(u - 2, u)
   }
   return !1
}
<ul class="nav">
   <li>
      <label>Valor Renda no Período (R$)</label><br />
      <input type="text" required maxlength="15" style="border: solid 0.5px #000; width: 200px;" onkeypress="return(moeda(this,'.',',',event))">
   </li>
</ul>

2
  • 1
    A variável que você procura é "a", com o código" a.value.replace(/[^\d]+/g,'') " você obtém os números, aí precisa tratar isso.-
    – Null
    Commented 13/11/2019 às 18:09
  • function FormatCurrency(valor) { valor = valor + '' valor = parseInt(valor.replace(/[\D]+/g, '')) valor = valor + '' if (valor.length === 1) valor = valor.replace(/([0-9]{1})/, ',0$1') else valor = valor.replace(/([0-9]{2})$/g, ',$1') if (valor.length > 6) { valor = valor.replace(/([0-9]{3}),([0-9]{2}$)/g, '.$1,$2') } if (valor.length > 10) { valor = valor.replace(/([0-9]{3})\.([0-9]{3}),([0-9]{2})$/g, '.$1.$2,$3') } valor = 'R$ ' + valor if (valor == 'R$ NaN') valor = '' return valor as string } Commented 1/10/2023 às 13:31

3 Respostas 3

8

Uma outra alternativa com um código menor.

const mascaraMoeda = (event) => {
  const onlyDigits = event.target.value
    .split("")
    .filter(s => /\d/.test(s))
    .join("")
    .padStart(3, "0")
  const digitsFloat = onlyDigits.slice(0, -2) + "." + onlyDigits.slice(-2)
  event.target.value = maskCurrency(digitsFloat)
}

const maskCurrency = (valor, locale = 'pt-BR', currency = 'BRL') => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(valor)
}
<input type="text" onInput="mascaraMoeda(event);" />

2
  • Não é exatamente "o que o autor quer", mas ta de parabéns pela refatoração do código, reduziu bastante as linhas e conforme o seguimento da ES6.. massa!
    – gleidson
    Commented 29/08/2021 às 2:45
  • Muito bom, isso me ajudou.Obrigado Commented 4/07 às 12:50
4

Coloque no início da função um if com o replace indicado pelo amigo @Null nos comentários, acrescentando o método .length que irá retornar o número de dígitos no input.

Basta apenas a.value.replace(/[^\d]/g, '').length, onde a regex /[^\d]/g irá eliminar tudo o que não for número. Então você irá comparar com o atributo maxlength:

if(a.value.replace(/[^\d]/g, '').length > a.getAttribute("maxlength")-1)
    return

O código a.getAttribute("maxlength") irá retornar 15 (do atributo maxlength="15") subtraindo 1, ou seja, se a quantidade de números no input for maior que 14, irá entrar no return do if saindo da função, e assim permitindo que se digite no máximo 15 números.

Veja:

function moeda(a, e, r, t) {

   if(a.value.replace(/[^\d]/g, '').length > a.getAttribute("maxlength")-1)
    return

   let n = ""
     , h = j = 0
     , u = tamanho2 = 0
     , l = ajd2 = ""
     , o = window.Event ? t.which : t.keyCode;
   if (13 == o || 8 == o)
       return !0;
   if (n = String.fromCharCode(o),
   -1 == "0123456789".indexOf(n))
       return !1;
   for (u = a.value.length,
   h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++)
       ;
   for (l = ""; h < u; h++)
       -1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h));
   if (l += n,
   0 == (u = l.length) && (a.value = ""),
   1 == u && (a.value = "0" + r + "0" + l),
   2 == u && (a.value = "0" + r + l),
   u > 2) {
       for (ajd2 = "",
       j = 0,
       h = u - 3; h >= 0; h--)
           3 == j && (ajd2 += e,
           j = 0),
           ajd2 += l.charAt(h),
           j++;
       for (a.value = "",
       tamanho2 = ajd2.length,
       h = tamanho2 - 1; h >= 0; h--)
           a.value += ajd2.charAt(h);
       a.value += r + l.substr(u - 2, u)
       
   }
   return !1
}
<ul class="nav">
   <li>
      <label>Valor Renda no Período (R$)</label><br/>
      <input type="text" required maxlength="15" style="border: solid 0.5px #000; width: 200px;" onkeypress="return(moeda(this,'.',',',event))">
   </li>
</ul>

2
  • Perfeito, cara, puxa, funcionou perfeitamente!!! Muito obrigado!!
    – Renan
    Commented 14/11/2019 às 12:25
  • Códigozinho apesar de grande, tá funcional. Valeu, Lopes Gabiroba. Rs Commented 7/04/2021 às 15:13
4

O problema de usar maxlength é que ele acaba sendo "ignorado". Afinal, se você quer um número com no máximo 15 dígitos (por exemplo, 123456789012345), o valor com máscara será 1.234.567.890.123,45, ou seja, 20 caracteres.

E o JavaScript aceita que você coloque um valor com mais caracteres que o indicado por maxlength. Exemplo:

const input = document.querySelector('#valor');
// setar um valor com mais de 15 caracteres
input.value = '12345678901234567890123456789012345678901234567890123456789012345678901234567890';

// maxlength continua sendo 15
console.log(input.maxLength); // 15
// mas o valor tem mais que 15 caracteres
console.log(input.value);
<input type="text" id="valor" maxlength="15" />

Por isso, se o valor já for 123.456.789,09 (ou seja, 14 caracteres), e eu digitar mais um número (por exemplo, 8), a máscara será aplicada e o valor ficará com 16 caracteres (1.234.567.890,98). E depois disso não conseguirei digitar mais nada, mesmo que o valor só tenha 12 dígitos (eu só consigo setar um valor com mais caracteres via JavaScript - digitando até daria, como está em outra resposta, mas ela usa o evento keypress, que como veremos adiante, está obsoleto).

Ou seja, não adianta ter o maxlength se você pode setar qualquer valor maior que isso. E de qualquer forma, você não quer verificar o tamanho total do campo, e sim a quantidade de dígitos. Colocar maxlength igual a 15 só deixa o código mais confuso na minha opinião, já que na prática (segundo as regras que você mesmo definiu) ele pode ter mais de 15 caracteres.

Na verdade o que podemos fazer é usar maxlength igual a 20 (que é a quantidade de caracteres necessários para formatar 15 dígitos), o que impediria de digitar mais caso já esteja "cheio", e na função de máscara garantimos que desses 20 caracteres, no máximo 15 sejam dígitos.


Para que o campo possa ter a informação de quantos dígitos ele aceita, uma alternativa é colocar esta informação no seu dataset. Por exemplo, para ter no máximo 15 dígitos:

<input type="text" id="valor" data-max-digits="15" maxlength="20" />

Assim, basta pegar esta informação na hora de verificar:

// usa vírgula como separador decimal, ponto como separador de milhar, sempre com 2 casas decimais
const formatter = new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function mask(e) {
    const input = e.target;
    // elimina tudo que não é dígito
    input.value = input.value.replace(/\D+/g, '');
    if (input.value.length === 0) // se não tem nada preenchido, não tem o que fazer
        return;
    // verifica se ultrapassou a quantidade máxima de dígitos (pegar o valor no dataset)
    const maxDigits = parseInt(input.dataset.maxDigits);
    if (input.value.length > maxDigits) {
        // O que fazer nesse caso? Decidi pegar somente os primeiros dígitos
        input.value = input.value.substring(0, maxDigits);
    }
    // lembrando que o valor é a quantidade de centavos, então precisa dividir por 100
    input.value = formatter.format(parseInt(input.value) / 100);
}

document.querySelector('#valor').addEventListener('input', mask);
<input type="text" id="valor" data-max-digits="15" maxlength="20" />

Usei um NumberFormat que formata os números com 2 casas decimais, além de usar os separadores corretos (vírgula para os decimais, ponto para os milhares - isso é controlado pelo locale, que no caso é o valor pt-BR, que corresponde ao português do Brasil). Desta forma ele não exibe o "R$" antes, mas se quiser inclui-lo, basta fazer como a outra resposta indicou:

// Use isso se quiser que o valor tenha o "R$" antes dos números (mas aí precisa aumentar o maxlength para que inclua o "R$")
const formatter = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });

Depois, eu removo tudo que não é dígito (\D+, ou seja, um ou mais caracteres que não sejam dígitos), e só depois eu vejo se ultrapassou o limite máximo de dígitos (cuja quantidade está indicada no dataset).

Por fim, antes de formatar, eu divido o valor por 100, afinal o que temos são apenas dígitos que correspondem à quantidade total de centavos. Não precisa manipular strings como as outras respostas fizeram, basta ajustar o valor numérico que o NumberFormat faz o resto para você.

Eu não usei o evento keypress (que segundo a documentação está obsoleto e não deve ser mais usado), e no lugar coloquei o evento input, que detecta não apenas se algo é digitado, mas também se é colado via Ctrl+V, ou se algum número é apagado (testei a solução da outra resposta no Chrome, por exemplo, e ela não refaz a máscara se um dígito é apagado, e nem se fizer Ctrl+V de um número), etc.

Aliás, se você por exemplo fizer Ctrl+V de um valor como 12345678901234567890, eu pego somente os 15 primeiros dígitos (é pra isso que serve o if (input.value.length > maxDigits)). Pois em casos de copy-paste todo o valor é jogado no input de uma vez, então eu tenho que eliminar os dígitos a mais (o que não ocorre se você só digita um número por vez, pois neste caso a máscara é aplicada logo depois de cada tecla e não cai no if). Assim eu garanto que nunca vai ultrapassar a quantidade máxima de dígitos.

O if (input.value.length > maxDigits) também serve para tratar outras situações, como por exemplo:

  • o valor atual do input (após aplicar a máscara) é 12.345.678,90 (10 dígitos)
  • eu copio (Ctrl+C) o valor 9999999999 (de um outro programa qualquer)
  • posiciono o cursor no início (antes do 1)
  • faço Ctrl+V. O valor do input passa a ser 999999912.345.678,90 (ele limita usando o valor do maxlength, por isso que nem todos os 9 são colados - testei no Chrome, não sei se todos os browsers farão da mesma forma). Depois de remover tudo que não é dígito, mas antes de aplicar a máscara, o valor passa a ser 99999991234567890 (17 dígitos), e por fim, depois de pegar somente os 15 primeiros dígitos e aplicar a máscara, fica 9.999.999.123.456,78

Obs: aceitar 15 dígitos significa que o valor máximo do campo é 9.999.999.999.999,99 (quase 10 trilhões de reais), ou seja, um valor maior que o PIB brasileiro de 2020. E no seu HTML o label do campo é "Valor Renda no Período", então será que 15 dígitos não seria exagero? Enfim...

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 .