Jquery Mask number with commas and decimal

Question

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.

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

What have you tried? I can see several examples in the page you link and some of them appear to do exactly what you ask for :-? — Álvaro González, Feb 15 '16 at 15:46

score 34 · Accepted Answer · answered Feb 15 '16 at 15:51

34

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});

answered Feb 15 '16 at 15:51

Phiter

14,570
14
50
84

Thank You i was trying it without the {reverse:true}; Once I added it everything works great. – James Feb 15 '16 at 17:34
@AdrianoResende, this should work. Just make sure to leave the `{reverse: true}` on – Phiter Nov 28 '16 at 15:19
1

How to make the decimal value optional? – Wildan Muhlis Jan 23 '20 at 10:24
the problem is when you have more inputs for money.. it applies again the mask, any solution? – guilieen Nov 30 '20 at 16:46
@guilieen you would have to use another selector then. Instead of `.money`, use an id for the input where you actually need this. – Phiter Dec 01 '20 at 15:11
What's the different this pattern `#,##0` with this `#,##` ?? @Phiter – Ray Coder Jan 30 '21 at 12:43

score 4 · Answer 2 · answered Feb 15 '16 at 15:47

4

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});

answered Feb 15 '16 at 15:47

ADreNaLiNe-DJ

4,787
3
26
35

1

how to add dollar prefix? e.g $5.00 – Renan Coelho Jun 11 '19 at 18:03
1

css .money:before { content: '$'; } – php-b-grader Dec 15 '20 at 23:10

score 0 · Answer 3 · answered Feb 20 '19 at 13:14

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

<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>

Jquery Mask number with commas and decimal

3 Answers3

Linked