javascript - Add space separator to number in input box - Stack Overflow

admin管理员组

文章数量:1356761

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

Share Improve this question Follow edited Dec 14, 2014 at 0:53 Christoffer asked Dec 14, 2014 at 0:34 ChristofferChristoffer 7,79799 gold badges4242 silver badges6060 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

<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.

本文标签： javascriptAdd space separator to number in input boxStack Overflow