Jquery mask number with commas and decimals

Question

I use the Jquery mask plugin to format many things on my site, and I'm trying to figure out how to get it to format numbers the way I need. I am using the following plugin.

https://igorescobar.imtqy.com/jQuery-Mask-Plugin/

I am trying to get the following format for my numbers.

999,999,999.99 

A number is a currency field for which you need to add a comma every three digits, and the value can be as 0.00

Answer 1

Well, that worked. I just changed the example from the website, changing the 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 are no quantity limits. If you want to limit them, you can do $('.money').mask('000,000,000,000,000.00', {reverse: true});

Answer 2

Try this mask on your website with inverting commas and periods:

 $('.money').mask('000.000.000.000.000,00', {reverse: true}); 

have

 $('.money').mask('000,000,000,000,000.00', {reverse: true}); 

Answer 3

I created a mask that is without reverse, but still works fine.

The idea is to change the mask on the fly on every onKeyPress. Here is the solution: 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> 

Answer 4

If your system is in English, use this regex:

 $(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\.\\d{1,2})?$"}); 

If your system is in Brazilian Portuguese, use this:

Import:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script> 

HTML:

 <input class="mask" type="text" /> 

JS:

 $(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\,\\d{1,2})?$"}); 

This is because in Brazilian Portuguese we write “1.000.000.00” rather than “1,000,000.00”, as in English, so if you use “.” the system will not understand the decimal point.

This is it, I hope this helps someone. I spend a lot of time to figure this out.