Format amount on keyup

Question

I would like to format amount on keyup javascript event. I need a result like this:

• 100 > 100
• 1000 > 1 000
• 100000000 > 100 000 000
• 1000,12 > 1 000,12

Can you help me please?

Answer 1

You need something like this:

function formatNumber(numberString) {
    var commaIndex = numberString.indexOf(',');
    var int = numberString;
    var frac = '';

    if (~commaIndex) {
        int = numberString.slice(0, commaIndex);
        frac = ',' + numberString.slice(commaIndex + 1);
    }

    var firstSpanLength = int.length % 3;
    var firstSpan = int.slice(0, firstSpanLength);
    var result = [];

    if (firstSpan) {
        result.push(firstSpan);
    }

    int = int.slice(firstSpanLength);

    var restSpans = int.match(/\d{3}/g);

    if (restSpans) {
        result = result.concat(restSpans);
        return result.join(' ') + frac;
    }

    return firstSpan + frac;
}

formatNumber('1234567890,12'); // "1 234 567 890,12"

Use it with your event listener and send to this function strings that represents numbers and it will return strings int the desired format

input.onkeyup = function () {
    input.value = input.value.replace(/\d+(?:,\d+)?/g, formatNumber);
};

Answer 2

function formatNumberField() {
    // unformat the value
    var value = this.value.replace(/[^\d,]/g, '');

    // split value into (leading digits, 3*x digits, decimal part)
    // also allows numbers like ',5'; if you don't want that,
    // use /^(\d{1,3})((?:\d{3})*))((?:,\d*)?)$/ instead
    var matches = /^(?:(\d{1,3})?((?:\d{3})*))((?:,\d*)?)$/.exec(value);

    if (!matches) {
        // invalid format; deal with it however you want to
        // this just stops trying to reformat the value
        return;
    }

    // add a space before every group of three digits
    var spaceified = matches[2].replace(/(\d{3})/g, ' $1');

    // now splice it all back together
    this.value = [matches[1], spaceified, matches[3]].join('');
}

// attaching event handler with jQuery...
$(document).ready(function() {
    $('#your-element-id').on('keyup', formatNumberField);
});

// With vanilla JS, it can get a little ugly.  This is the simplest way that
// will work in pretty much all browsers.
// Stick this in your "dom is loaded" callback
document.getElementById('your-element-id').onkeyup = formatNumberField;

Answer 3

Here's a wacky format function that was fun to think about:

function formatNumber(s) {
  var parts = s.split(/,/)
    , spaced = parts[0]
         .split('').reverse().join('') // Reverse the string.
         .match(/\d{1,3}/g).join(' ') // Join groups of 3 digits with spaces.
         .split('').reverse().join(''); // Reverse it back.
  return spaced + (parts[1] ? ','+parts[1] : ''); // Add the fractional part.
}

You can attach it to an element's "keyup" event by using element.addEventListener(...) in pure JavaScript or the .on(...) function in jQuery, e.g.:

$('.my-input').on('keyup', function() {
  var $this = $(this);
  $this.val(formatNumber($this.val());
});