键入时为数字添加逗号

Question

我想在用户输入数字时添加逗号.在Jquery中选择input form-control具有属性number类型的类的正确语法是什么？

编辑:我无法更改HTML代码,因为它是从Django与Bootstrap输出.

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的

$(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/

Answer 1

首先,你不能使用input type=number,因为它不允许,你使用的字符来表示数字组.

其次,具有良好的正则表达式,这实际上非常简单,并且实际上不需要反向和反向,这很无聊.

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

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

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

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

小提琴

但是,真正的魔力是,我打赌你会大叫,toLocaleString!什么？!

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

Answer 2

更改type="number"为type="text"因为您不能将逗号放入数字。

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

检查更新的小提琴

Answer 3

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

乐趣永无止境，它是HTML5。