JSFiddle - React, Tailwind, and code Playground
by Castrolol
HTML
<input type="text" style="text-align: right" />
JavaScript
var input = document.querySelector("input");
function atualizarCampo(input, char, suffix){
suffix = suffix || "";
var texto = input.value + char;
texto = texto.replace(/[^0-9]/gi, "");
texto = (+texto).toString();
if( texto.length < 3 ) texto = ("000" + texto).substr(-3, 3);
var numbers = texto.split("");
numbers.reverse();
var decimalNumbers = numbers.slice(0, 2);
numbers = numbers.slice(2);
var formatedNumbers = [];
for(var i = 0; i < numbers.length; i++){
if(i && i % 3 == 0){
formatedNumbers.push(".");
}
formatedNumbers.push(numbers[i]);
}
formatedNumbers.reverse();
decimalNumbers.reverse();
formatedNumbers.push(",");
input.value = suffix + formatedNumbers.concat(decimalNumbers).join("");
}
input.addEventListener("keypress", function(ev){
if(ev.ctrlKey) return;
ev.preventDefault();
atualizarCampo(input, String.fromCharCode(ev.charCode), "R$ ");
});
atualizarCampo(input, "0", "R$ ");