0

Estou tentando utilizar Intl.NumberFormat() para inserir uma máscara em um input do meu site, no console.log, os valores estão corretamente formatados, porém ao tentar inserir o valor em um campo de texto do site (como por exemplo o valor R$ 1,000.00 , o mesmo só mostra R$ 1,00 e ao voltar com backspace e/ou tentar adicionar algum outro número, ele mostra R$NaN.

Tentei todas as formas de evitar isto, porém minha cabeça já fritou.

Abaixo, segue o trecho de código:

  const campodosite = document.querySelectorAll('.minhaclasse');
            campodosite.forEach((a) => {
              a.addEventListener('input', (e) => {
                
                const valorCampo = e.target.value;

                const novoValor = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL'}).format(valorCampo);
                console.log(novoValor); // Funciona perfeitamente
                e.target.value=novoValor; // R$Nan

              })
            });

Já tentei com algumas outras opções, porém, sem sucesso.

Desde já agradeço.

6
  • Cara, acho que o problema é relacionado ao uso de , para separar milhar e . para decimais no teu caso - já que estás usando pt-br... Mas isso é um palpite... Commented 12/01/2022 às 20:48
  • Obrigado pelo comentário @LeonardoAlvesMachado, todavia, já testei em outras línguas e não obtive sucesso :-(
    – Phill
    Commented 13/01/2022 às 3:30
  • Provavelmente o que acontece é que depois que vc já digitou algo, o valor do campo passa a ser "R$ etc..", e ao tentar formatar isso, dá erro (já que uma string que começa com "R$ " não pode ser convertida para número). Se entendi bem, o que vc precisa é algo assim: jsfiddle.net/L6ywv3dc/1
    – hkotsubo
    Commented 13/01/2022 às 11:18
  • Obrigado @hkotsubo seria isso sim, todavia, mesmo após remover o Intl do loop, o problema permanece... Acho que o problema está justamente no forEach, mas o que me deixa intrigado é funcionar corretamente com o console.log isoladamente e quando tento colocar para a página, começa esse erro...
    – Phill
    Commented 13/01/2022 às 12:26
  • Eu sugiro editar a pergunta e adicionar o HTML, pois eu não consigo reproduzir o erro só com as informações dadas até o momento
    – hkotsubo
    Commented 13/01/2022 às 13:02

2 Respostas 2

0

O problema está exatamente no que você descreveu. Você precisa tratar o texto e converter para número em javascript. principalmente com caracteres como vírgula ','.

number = '1,0000';
console.log(new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'BRL' }).format(parseFloat(number)));

EDIT: Segue o que falei nos comentários

//$('.dinheiro').mask('#,##0.00', {reverse: true});
$('.dinheiro').mask('#,##0.00', {reverse: true});
$('.dinheiro').on('change', function(ev){console.log(ev.target.value.replace(',','')); console.log(new Intl.NumberFormat('pt-br', { style: 'currency', currency: 'BRL' }).format(parseFloat(ev.target.value.replace(',',''))))})
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>           
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>           
<label for="dinheiro">R$</label><input type="text" id="dinheiro" name="dinheiro" class="dinheiro form-control" style="display:inline-block" />

Meu conselho é que você use a mascara mas sempre confirme que a numero é valido com parseFloat.

2
  • Obrigado pela sua resposta. Todavia, o erro persiste... No console.log está normal e funcionando perfeitamente porém se eu usar dentro da página, sempre vem como NaN... :-(
    – Phill
    Commented 13/01/2022 às 12:10
  • ou vc trata o texto antes de fazer o format ou vc precisa já passar o valor como decimal pro javascript. A linguagem não vai entender a pontuação q vc tá usando, js só reconhece pontos '.' como decimal. Segue edição na respota. Commented 13/01/2022 às 12:53
0

Dei uma reformulada no código, bebi um café, li todos os comentários e ajustei para chegar a solução:

const campoMonetario = document.querySelectorAll('.campoMonetario');
                const formataValor = new Intl.NumberFormat('pt-BR', {style: 'currency', currency:'BRL'});

                campoMonetario.forEach((campos) => {
                  campos.addEventListener('input', (dados) => {
                    const valorBruto = dados.target.value.replace(/\D/g, '');
                    const valorFinal = (formataValor.format(parseFloat(valorBruto / 100)));
                    dados.target.value = valorFinal;
                    
                  })
                })

Obrigado a todos pela ajuda ;-)

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 .