JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<div>
    <label>
        Real:
        <input id="real" type="text" />
    </label>
</div>
<div>
    <label>
        Euro:
        <input id="euro" type="text" />
    </label>
</div>
<div>
    <label>
        Dollar:
        <input id="dollar" type="text" />
    </label>
</div>

JavaScript

var real = document.getElementById("real");
var euro = document.getElementById("euro");
var dollar = document.getElementById("dollar");

var Mascara = function (elemento, localizacao, moeda, digitos) {    
    var self = this;    

    this.target = elemento;
    this.options = {}
    this.options.minimumIntegerDigits = 1;
    this.options.minimumFractionDigits = digitos;
    this.options.maximumFractionDigits = digitos;
    var defaultFormat = new Intl.NumberFormat(localizacao, this.options);

    this.options.style = "currency";
    this.options.currency = moeda;
    this.numberFormat = new Intl.NumberFormat(localizacao, this.options);
    this.base10 = Math.pow(10, digitos);

    var semSimbolo = defaultFormat.format(0);
    var comSimbolo = this.numberFormat.format(0);

    if (comSimbolo.indexOf(semSimbolo) == 0) {
        this.prefix = "";
        this.suffix = comSimbolo.replace(semSimbolo, "");
    } else {
        this.prefix = comSimbolo.replace(semSimbolo, "");
        this.suffix = "";
    }

    elemento.addEventListener("input", function (event) {
        Mascara.onInput(self);
    });
    elemento.addEventListener("focus", function (event) {
        Mascara.onInput(self);
    });
}

Mascara.nonNumericPattern = /[^0-9]/g;

Mascara.onInput = function (self) {   
    var oldLength = self.target.value.length;
    var oldRange = self.target.selectionEnd;
    var minRange = self.prefix.length + 1;
    if (oldRange < minRange)
        oldRange = minRange;

    var value = self.target.value.replace(Mascara.nonNumericPattern, "");
    var numero = value ? parseInt(value) / self.base10 : 0;

    self.target.value = self.numberFormat.format(numero);

    var maxRange = self.target.value.length - self.suffix.length;
    var newRange = oldRange + (self.target.value.length - oldLength);
    if (newRange > maxRange)
        newRange = maxRange;
    self.target.setSelectionRange(newRange, newRange);
}

new Mascara(real, "pt-BR", "BRL", 2);
new Mascara(euro,...