带有逗号和小数的 Jquery 掩码编号
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/35413377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Mask number with commas and decimal
提问by James
I am using a Jquery mask plugin to format many things on my site and I am trying to figure out how to get it to format numbers in the way I need. I am using the following plugin.
我正在使用 Jquery 掩码插件来格式化我网站上的许多内容,我试图弄清楚如何让它以我需要的方式格式化数字。我正在使用以下插件。
https://igorescobar.github.io/jQuery-Mask-Plugin/
https://igorescobar.github.io/jQuery-Mask-Plugin/
I am attempting to get the following format for my numbers.
我正在尝试为我的数字获取以下格式。
999,999,999.99
The number is a currency field that needs a comma added every three digits and the value can be as low as 0.00
数字是一个货币字段,需要每三位数加一个逗号,值可以低至 0.00
回答by Phiter
Well, this worked. I just tweaked the example from the website changing dots with commas and it worked.
嗯,这奏效了。我只是调整了网站上的示例,用逗号更改了点,它起作用了。
$('.money').mask("#,##0.00", {reverse: true});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
<input class="money" type="text"/>
As you can see there is no limitation of numbers. If you want to limit them, you can do $('.money').mask('000,000,000,000,000.00', {reverse: true});
如您所见,没有数量限制。如果你想限制它们,你可以这样做$('.money').mask('000,000,000,000,000.00', {reverse: true});
回答by ADreNaLiNe-DJ
Try this mask from their website with inverting commas and dots:
从他们的网站上尝试使用反转逗号和点的掩码:
$('.money').mask('000.000.000.000.000,00', {reverse: true});
to have
具有
$('.money').mask('000,000,000,000,000.00', {reverse: true});
回答by Aram Sahradyan
I've created a mask which is without reverse but still works fine.
我创建了一个没有反向但仍然可以正常工作的掩码。
Idea is to change mask on the fly on every onKeyPress. Here is a solution: https://codepen.io/anon/pen/wNvvWw
想法是在每个 onKeyPress 上即时更改掩码。这是一个解决方案:https: //codepen.io/anon/pen/wNvvWw
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<input type="text" class="input-float" placeholder="00.00" value="" />
<script>
var curCharLenght = 0;
var floatOptions = {
onKeyPress: function(cur, e, currentField, floatOptions) {
var mask = createMask(cur);
var field = currentField
.parent()
.find(".input-float[data-field=" + currentField.attr("data-field") + "]");
if (cur.length - curCharLenght < 0 && cur.indexOf(".") == -1) {
field.mask(mask + " 000", floatOptions);
curCharLenght = cur.length;
} else if (event.data == "," || event.data == ".") {
curCharLenght = mask.length + 1;
mask += ".0000";
field.mask(mask, floatOptions);
} else {
if (cur.indexOf(".") == -1) {
mask = mask + " 000.0000";
field.mask(mask, floatOptions);
if (isNaN(e.originalEvent.data) || e.originalEvent.data == " ") {
field.val(field.val().slice(0, -1));
}
}
curCharLenght = cur.length;
}
}
};
function createMask(val) {
var mask = "";
var num = val.split(".")[0];
num = num.replace(/ /g, "");
for (var i = 1; i <= num.length; i++) {
mask += "0";
if ((num.length - i) % 3 === 0 && i != num.length) {
mask += " ";
}
}
return mask;
}
$(".input-float").each(function(index, el) {
var item = $(this);
item.attr("data-field", "field-" + index);
var mask = createMask(item.val());
if (item.val().indexOf(".") !== -1) {
var splitedVal = item.val().split(".");
if (splitedVal.length > 1 && splitedVal[1].length > 2) {
if (splitedVal[1].length == 3) {
mask += ".000";
} else {
mask += ".0000";
}
} else {
mask += ".00";
}
}
item.mask(mask, floatOptions);
});
</script>