在输入框中给数字添加空格分隔符

Question

我想让输入框显示带有空格分隔符的数字，像这样：20 000和20 000 000，而不是20000和20 000 000。并且我希望在输入时实时添加这些间隔。有没有好的解决方案？ 我使用这个函数对静态输出进行处理，但是当从文本框获取值，通过该函数运行它，然后将其放回时，它不起作用，原因未知。请保留HTML标记。

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

- Christoffer

---

你有没有尝试过？我没有搜索过，但是关于数字格式化的问题经常出现，所以如果这个问题还没有被回答多次，我会有点惊讶。 - David Thomas

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()。

- gyc

---

非常好。如果您想获得一些声望，请添加一个解释说明它是如何工作的 :) - Ian Hazzard

这并不是解决问题的好方法。由于值的改变，你最终总是会在末尾处留下标记，所以例如使用箭头键返回或在输入中间进行编辑是不可能的。 - Anders

@Anders，根据OP的要求，这是一个很好的答案。如果您在实现某些特定内容时遇到问题，请提出新问题。关于箭头键：http://jsfiddle.net/LLcsxr6c/100/ - gyc

Answer 2

创建一个函数来处理字符串操作。接下来，在输入框上设置一个监听器，以便监听按键事件。该按键事件应触发您的函数，将输入框的值传递给它，并将该值转换为新的带空格的字符串。

- Liam Schauerman