键入时向数字添加逗号

I am trying to add commas when the user type a number. What is the correct syntax to select the input form-control class with attribute number type in Jquery?

我想在用户输入数字时添加逗号。在Jquery中选择具有属性编号类型的输入表单控件类的正确语法是什么？

EDIT: I can't change the HTML code since it is outputted from Django with Bootstrap.

编辑：我无法更改HTML代码，因为它是从Django与Bootstrap输出。

HTML

HTML

<span class="input-group-addon">$</span>
<input class="form-control" id="id_step2-number_2"
       name="step2-number_2" type="number">
<span class="input-group-addon">.00</span>

JQuery

JQuery的

$(document).ready(function(){
    $("input[type='number']").keyup(function(event){
        // skip for arrow keys
        if(event.which >= 37 && event.which <= 40){
            event.preventDefault();
        }
        var $this = $(this);
        var num = $this.val().replace(/,/gi, "")
            .split("").reverse().join("");

        var num2 = RemoveRougeChar(
            num.replace(/(.{3})/g,"$1,").split("")
                .reverse().join("")
        );

        console.log(num2);

        // the following line has been simplified.
        // Revision history contains original.
        $this.val(num2);
    });
});

function RemoveRougeChar(convertString){
    if(convertString.substring(0,1) == ","){
        return convertString.substring(1, convertString.length)            
    }
    return convertString;
}

JSFiddle Link http://jsfiddle.net/yWTLk/767/

JSFiddle Link http://jsfiddle.net/yWTLk/767/

3 个解决方案

#1

First of all, you can't use input type=number, because it won't allow the character , which you are using to notate number group.

首先，您不能使用input type = number，因为它不允许使用您用来表示数字组的字符。

Second, with a good regular expression, this is actually super easy, and really no need for reverse and reverse, which is boring.

第二，具有良好的正则表达式，这实际上非常简单，并且实际上不需要反向和反向，这很无聊。

var num = $this.val().replace(/,/gi, "");
var num2 = num.split(/(?=(?:\d{3})+$)/).join(",");

The first line removes commas from input value.
The second line is magic, it splits the value into groups of 3 from last to first, then join with comma. For example, '1234567' will become ['1', '234', '567'].

第一行从输入值中删除逗号。第二行是魔术，它将值从最后一个分为3组，然后用逗号连接。例如，'1234567'将变为['1'，'234'，'567']。

I use split here is just to show the power of RegExp, in practice we don't need to split and join, just replace directly:

我在这里使用split只是为了展示RegExp的强大功能，在实践中我们不需要拆分和连接，只需直接替换：

var num2 = num.replace(/\d(?=(?:\d{3})+$)/g, '$&,');

fiddle

小提琴

But, the real magic is, I bet you would yell, toLocaleString! What?!

但是，真正的魔力是，我敢打赌你会大声喊叫，来自LocaleString！什么？！

(1234567).toLocaleString() // "1,234,567"

#2

Using the input type "number" seems to prevent inserting commas into the input field with Javascript. If you'd like to insert commas, you may want to use a "text" input instead, but this will prevent numeric validation on browsers with Javascript disabled.

使用输入类型“数字”似乎可以防止使用Javascript将逗号插入输入字段。如果您想插入逗号，可能需要使用“文本”输入，但这会阻止在禁用Javascript的浏览器上进行数字验证。

The fun will never end, it's HTML5.

乐趣永远不会结束，它是HTML5。

#3

Change type="number" to type="text" because you can't put comma into number.

将type =“number”更改为type =“text”，因为您无法将逗号添加到数字中。

<input class="form-control" id="id_step2-number_2"
       name="step2-number_2" type="text">

Check updated Fiddle

检查更新的小提琴

#1