I'm trying to get an input box to display numbers with space separator. Like this: 20 000 and 20 000 000 instead of 20000 and 20 000 000

The thing is that I want this to happen as you type. So when you type a number into an input element I want this spacing to be added on the fly.

Does anyone have a good solution for this?

I'm using this function to do this on static outputs, but it doesn't work well when getting the value from a textbox, running it through the function and then putting it back, for some reason.

function delimitNumber(number) {
    var delimiter = " "; 

    number = new String(number);
    var parts = number.split('.', 2);
    var decimal = parts[1];
    var i = parseInt(parts[0]);

    if(isNaN(i)) 
        return ''; 

    var minus = '';

    if (i < 0) 
        minus = '-'; 

    i = Math.abs(i);
    var n = new String(i);
    var a = [];

    while(n.length > 3) {
        var nn = n.substr(n.length-3);
        a.unshift(nn);
        n = n.substr(0,n.length-3);
    }

    if (n.length > 0) 
        a.unshift(n); 

    n = a.join(delimiter);

    if (typeof decimal === 'undefined' || decimal.length < 1)  
        number = n;
    else 
     number = n + '.' + decimal;

    number = minus + number; // Assemble the number with negative sign (empty if positive)
    return number;
}

I'm trying to get an input box to display numbers with space separator. Like this: 20 000 and 20 000 000 instead of 20000 and 20 000 000

The thing is that I want this to happen as you type. So when you type a number into an input element I want this spacing to be added on the fly.

Does anyone have a good solution for this?

I'm using this function to do this on static outputs, but it doesn't work well when getting the value from a textbox, running it through the function and then putting it back, for some reason.

function delimitNumber(number) {
    var delimiter = " "; 

    number = new String(number);
    var parts = number.split('.', 2);
    var decimal = parts[1];
    var i = parseInt(parts[0]);

    if(isNaN(i)) 
        return ''; 

    var minus = '';

    if (i < 0) 
        minus = '-'; 

    i = Math.abs(i);
    var n = new String(i);
    var a = [];

    while(n.length > 3) {
        var nn = n.substr(n.length-3);
        a.unshift(nn);
        n = n.substr(0,n.length-3);
    }

    if (n.length > 0) 
        a.unshift(n); 

    n = a.join(delimiter);

    if (typeof decimal === 'undefined' || decimal.length < 1)  
        number = n;
    else 
     number = n + '.' + decimal;

    number = minus + number; // Assemble the number with negative sign (empty if positive)
    return number;
}

• javascript
• jquery
• html

• Have you made any attempt? I've not searched, but number-formatting questions e up pretty regularly, so I'd be a little surprised if this question hasn't been answered multiple times already. – David Thomas Commented Dec 14, 2014 at 0:47

2 Answers 2

<input type="text" id="number" />

JS:

$('#number').on("keyup", function() {
    this.value = this.value.replace(/ /g,"");
    this.value = this.value.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
});

http://jsfiddle/LLcsxr6c/

I used the keyup event because keypress or keydown will be triggered just before the input box is actually updated.

With jQuery 2 you can use $('#number').on("input", function()

Create a function that will do the string manipulation for you. Next, set up a listener on your input box to listen for a key down. That key down event should trigger your function, passing the value of your input box, and in turn setting the value to the newly spaced out string.