javascript - How to "mask" an input to show brazilian currency - Stack Overflow

admin管理员组

文章数量:1277314

I need a input range shows the value formatted for Brazilian money. By logic, it would suffice to receive this number in a function that would format it and then return the formatted value. But this is Javascript, and I found no way to make it work.

function converter(valor){
  var numero = (valor).toLocaleString('pt-BR');
  document.getElementById('valor').value = 'R$ '+numero;
}

<input type="range" min="0" max="4000.00" value="2000.00" step="0.01" style="width:100%" oninput="converter(this.value)">
<p>
<input type="text" name="valor" value="R$ 0,00" id="valor">

I need a input range shows the value formatted for Brazilian money. By logic, it would suffice to receive this number in a function that would format it and then return the formatted value. But this is Javascript, and I found no way to make it work.

function converter(valor){
  var numero = (valor).toLocaleString('pt-BR');
  document.getElementById('valor').value = 'R$ '+numero;
}

<input type="range" min="0" max="4000.00" value="2000.00" step="0.01" style="width:100%" oninput="converter(this.value)">
<p>
<input type="text" name="valor" value="R$ 0,00" id="valor">

• javascript
• html

Share Improve this question Follow edited Jul 29, 2019 at 19:06 Calvin Nunes 6,50155 gold badges2323 silver badges5454 bronze badges asked Jan 30, 2019 at 14:53 Eibo - Sistemas WebEibo - Sistemas Web 17911 gold badge33 silver badges1313 bronze badges 4

• 1 There's <script> tags that are breaking it, I edited your question to fix that – Sv443 Commented Jan 30, 2019 at 14:57
• What is the problem you have with your current code? – Mark Baijens Commented Jan 30, 2019 at 15:03
• The problem is when I use an "input range" the "toLocaleString" function does NOT work, although it works normally in other cases. – Eibo - Sistemas Web Commented Jan 30, 2019 at 15:05
• Here in Brazil, we use the currency value thus: R$ 1.349,47. That is, the ma (,) separates the decimals and the period (.) Separates the thousands. – Eibo - Sistemas Web Commented Jan 30, 2019 at 15:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can use the second parameter of the toLocaleString() that is the options style argument, where you can set the currency, so you don't even need to use the concatenation with "R$" because it will be ready when toLocaleString is called.

Note that it's not current working for you because toLocaleString() is part of the Number.prototype in javascript and the parameter valor that you have is a string, so it won't work if you don't parse the string to number.

See below.

function converter(valor){
  var numero = parseFloat(valor).toLocaleString('pt-BR',{ style: 'currency', currency: 'BRL' });
  document.getElementById('valor').value = numero;
}

<input type="range" min="0" max="4000.00" value="2000.00" step="0.01" style="width:100%" oninput="converter(this.value)">
<p>
<input type="text" name="valor" value="R$ 0,00" id="valor">

Further reading: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

In case you are doing it with ReactJS I would suggest you to take a look in this ponent. You also could wrap it in a custom ponent e.g.ponent={TextField}

import React from "react"
import IntlCurrencyInput from "react-intl-currency-input"

const currencyConfig = {
  locale: "pt-BR",
  formats: {
    number: {
      BRL: {
        style: "currency",
        currency: "BRL",
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      },
    },
  },
};

const BrlCurrencyComponent = () => {
  const handleChange = (event, value, maskedValue) => {
    event.preventDefault();

    console.log(value); // value without mask (ex: 1234.56)
    console.log(maskedValue); // masked value (ex: R$1234,56)
  };

  return(
    <IntlCurrencyInput 
      ponent={TextField}
      currency="BRL" 
      config={currencyConfig}
      onChange={handleChange} 
    />
  );
}

export default BrlCurrencyComponent;

Here is the github link

本文标签： javascriptHow to quotmaskquot an input to show brazilian currencyStack Overflow