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

Chr*_*fer 4 html javascript jquery

我正在尝试获取一个输入框来显示带有空格分隔符的数字。像这样: 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;
}
Run Code Online (Sandbox Code Playgroud)

gyc*_*gyc 5

<input type="text" id="number" />
Run Code Online (Sandbox Code Playgroud)

JS:

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

http://jsfiddle.net/LLcsxr6c/

我使用了keyup事件,因为keypresskeydown将在输入框实际更新之前触发。

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

  • 这不是解决问题的好方法。由于值的变化,您总是以标记结束,因此不可能使用箭头键向后导航或仅在输入的中间进行编辑。 (4认同)