我想在用户输入数字时添加逗号。在Jquery中选择属性为input form-control
类型的number
类的正确语法是什么?
编辑:我无法更改HTML代码,因为它是从带有Bootstrap的Django输出的。
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链接 http://jsfiddle.net/yWTLk/767/
答案 0 :(得分:8)
首先,您无法使用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"
答案 1 :(得分:4)
将type="number"
更改为type="text"
,因为您无法将逗号加入数字。
<input class="form-control" id="id_step2-number_2"
name="step2-number_2" type="text">
检查更新的Fiddle
答案 2 :(得分:4)
使用输入类型“number”似乎可以防止使用Javascript将逗号插入输入字段。如果您想插入逗号,可能需要使用“文本”输入,但这会阻止在禁用Javascript的浏览器上进行数字验证。
乐趣永远不会结束,它是HTML5。