How can I add a comma to separate each group of three digits in a text input field?

Question

I have a text input field for a form where users are meant to enter a number. I would like to automatically insert a comma after every third digit.

For example, entering '20' would result in '20'. Entering '100' would result in '100'. But if they were to enter '1000', a comma would be inserted between the 1 and the following 0's (e.g., 1,000). Obviously this behaviour would continue should the number reach 7 digits (e.g., 1,000,000).

Is there an easy way to do this? I'm a bit of a newb at all of this, so please answer like you're talking to a child :)

Answer 1

The following javascript:

function format(input)
{
    var nStr = input.value + '';
    nStr = nStr.replace( /\,/g, "");
    var x = nStr.split( '.' );
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while ( rgx.test(x1) ) {
        x1 = x1.replace( rgx, '$1' + ',' + '$2' );
    }
    input.value = x1 + x2;
}

and the following HTML:

<input type="text" onkeyup="format(this)">

should solve your problem. The key is to use 'onkeyup'.

Try it here http://jsfiddle.net/YUSph/

Answer 2

for the fun of it:

'9876543210'
    .split('') // flip the entire string so that we can break every
    .reverse() //   3rd digit, starting from the end
    .join('')
    .split(/(...)/) // split on every 3rd
    .reverse()      // flip the string again, though now each group of 3 is
    .join(',')      //   backwards
    .replace(/,(?=,)|,$|^,/g, '') // remove extra ,
    .replace(/(,|^)(\d)(\d)?(\d)?/g, '$1$4$3$2') // flip each group of digits
// 9,876,543,210

Anyone want to take a stab at making that better?

Answer 3

function addCommas(nStr){
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
        return x1 + x2;
}

Pass the value of the input into function and set the input with the result returned. You can bind this to an onchange event.

Here is a working example that relies on jquery to bind the change event and set the value: http://jsfiddle.net/TYyfn/

Comma script is from: http://www.mredkj.com/javascript/nfbasic.html

Answer 4

Yes, it's not terribly difficult. I believe this reference may give you what you need.

Note that for this to be dynamic (as they type) you'd need to have this wired to the input field change handler. Otherwise, you can wire this to the input field blur handler (which will have the effect of putting the commas in the field when they leave the field).