Input fields: currency

by dorenstein

HTML

<input type="text" value="">
<br>
<input type="text" value="0">
<br>
<input type="text" value="0.0">
<br>
<input type="text" value="0.00">
<br>
<input type="text" value="1000">
<br>
<input type="text" value="555555.55">
<br>

CSS

input {
    margin: 5px;
    padding: 5px 8px;
    border-radius: 4px;
}

JavaScript

// Currency --> Double
function toDouble(value) {
    return Number(value.replace(/[^0-9\.-]+/g, ''));
}

// Double --> Currency
function toCurrency(value) {
    value = value.toString();
    var dollars = value.split('.')[0],
        cents = (value.split('.')[1] || '') + '00';
    dollars = dollars.split('').reverse().join('').replace(/(\d{3}(?!$)(?!-))/g, '$1,').split('').reverse().join('');
    return dollars + (cents.slice(0, 2) !== '00' ? '.' + cents.slice(0, 2) : '.00');
}

// Manages input = currency
var $input = $('input');

$input.each(function(index, el) {
    var curValue = $(el).val();

    // Normalize values to currency string
    var newValue = toCurrency(toDouble(curValue));
    $(el).val(newValue);

    // Keep a record of normalized data
    $(el).data('current-value', newValue);
});

// If data changed, store real data then convert to currency on blur
$input.on('change', function() {
    var value = $(this).val();

    // Data changed?
    if ($(this).data('current-value') !== value && value !== '') {
        $(this).val(toCurrency(toDouble(value)));
        $(this).data('current-value', toCurrency(toDouble(value)));
    } else {
        $(this).val($(this).data('current-value'));
    }
});