javascript - 在输入框中为数字添加空格分隔符

Question

我试图让一个输入框显示带有空格分隔符的数字。像这样:20 000 和 20 000 000 而不是 20000 和 20 000 000

问题是我希望在您键入时发生这种情况。因此，当您在输入元素中键入数字时，我希望即时添加此间距。

有人对此有好的解决方案吗？

我正在使用此函数在静态输出上执行此操作，但出于某种原因，当从文本框获取值、通过函数运行它然后将其放回时，它无法正常工作。

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;
}

Answer 1

<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.net/LLcsxr6c/

我使用了 keyup 事件，因为 keypress 或 keydown 将在输入框实际更新之前被触发。

在 jQuery 2 中，您可以使用 $('#number').on("input", function()