Shefarol Soluções Web

Formatando moeda - Voltar


Campos no HTML
<label for="real">Digite um valor (Será formatado em Real/BR)
<input type="text" name="real" id="real" class="form-control">
<br>
<label for="dolar">Digite um valor (Será formatado em Dólar/US)
<input type="text" name="dolar" id="dolar" class="form-control">
Código em Javascript
const formatCurrency = (value, currency, localeString) => {
    const options = { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2 };
    return value.toLocaleString(localeString, options);
}

const real = document.getElementById('real');
const realNumeric = document.getElementById('real_numeric');
const dolar = document.getElementById('dolar');
const dolarNumeric = document.getElementById('dolar_numeric');

const updateNumericValue = (input, hiddenInput) => {
    let value = input.value;
    value = value.replace(/[^\d,]/g, '');
    if (value) {
        value = value.replace(',', '.');
        hiddenInput.value = Number(value).toFixed(2);
    } else {
        hiddenInput.value = '';
    }
}


// *********************************
// Formatação para Real - BR
// *********************************

real.addEventListener('input', function() {
    let value = real.value;
    value = value.replace(/[^\d,]/g, '');
    real.value = value;
});

real.addEventListener('blur', function() {
    let value = real.value;
    value = value.replace(',', '.');
    if (value) {
        const formattedValue = formatCurrency(Number(value), 'BRL', 'pt-BR');
        real.value = formattedValue;
        updateNumericValue(real, realNumeric);
    }
});

real.addEventListener('focus', function() {
    let value = real.value;
    value = value.replace(/[^\d,]/g, '');
    real.value = value;
    updateNumericValue(real, realNumeric);
});




// *********************************
// Formatação para Dólar - US
// *********************************

dolar.addEventListener('input', function() {
    let value = dolar.value;
    value = value.replace(/[^\d,.]/g, '');
    dolar.value = value;
});

dolar.addEventListener('blur', function() {
    let value = dolar.value;
    value = value.replace(',', '.');
    if (value) {
        const formattedValue = formatCurrency(Number(value), 'USD', 'en-US');
        dolar.value = formattedValue;
        updateNumericValue(dolar, dolarNumeric);
    }
});

dolar.addEventListener('focus', function() {
    let value = dolar.value;
    value = value.replace(/[^\d,.]/g, '');
    dolar.value = value;
    updateNumericValue(dolar, dolarNumeric);
});