Jquery Mask number with commas and decimal

jquery.inputmask example
jquery mask currency
jquery input mask alphanumeric
jquery input mask regex
jquery inputmask numeric
jquery input mask percentage
jquery mask for alphanumeric
jquery mask letters only

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

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

jQuery Plugin For Number Input Formatting, In the sample page http://igorescobar.github.io/jQuery-Mask-Plugin/ consider the money mask. 1-User wants Manullay entering comma in number mask #252 Please examine the Decimal input, you can manually enter '. Last time I solved this I ended up splitting the string again to reverse it, insert commas into the array, and join again. – Mathletics Dec 28 '12 at 20:10 If using this with currency - which doesn't always have the decimals - adding yourNumber=yourNumber.toFixed(2) to the beginning sets it to always show the decimals even if they are 0

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

Manullay entering comma in number mask � Issue #252 , Jquery-maskMoney : jQuery plugin to mask data entry in the input text in the form precision : how many decimal places are allowed. default: 2; allowZero : use� I'm using RobinHerbots inputmask , How can I make 2 decimal places like 22.30 or 2.15? like 'currency' set up on the inputmask but without commas (auto generated base on values length) and currency

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-maskMoney, n�o esque�a de adicionar os js do jquery e do pluging !--> <script> $(document). ready(function(){ $("#money").inputmask('decimal', { 'alias': 'numeric',� With an alias you can define a complex mask definition and call it by using an alias name. So this is mainly to simplify the use of your masks. Some aliases found in the extensions are: email, currency, decimal, integer, date, datetime, dd/mm/yyyy, etc. First you have to create an alias definition.

Money mask with jquery.inputmask, Introduction into number formatting using string.replace in JavaScript. There are many different ways of printing an integer with a comma as a (dot) as a separator with numbers having digits after the decimal point though. In the US, commas and decimals are used to represent a number like 10000.20 as 10,000.20. However the same number in Europe is represented as 10.000,20. JavaScript is not a culture-aware programming language. Although JavaScript understands the English culture’s decimal formatting, however it does not know how to

Number formatting in JavaScript, Posted by: Suprotim Agarwal , on 1/23/2015, in Category jQuery and ASP. In the US, commas and decimals are used to represent a number like 10000.20 as � Easily format numbers for display use. Replace numbers inline in a document, or return a formatted number for other uses. Even enables seamless number formatting in input fields as-you-type. Currency formatting is easy too—simply add a currency placeholder in the label of your form element, and set the appropriate format.

Automatically add Commas to a Number in a TextBox, p> <p>The header above should slide right, indicating that jQuery is up and running. //clone integer def for decimals var mask = autoEscape(opts.prefix); mask += "[+]"; 0},keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA: 188� jQuery plugin to mask data entry in the input text in the form of money (currency). Download this project as a .zip file Download this project as a tar.gz file Just a simple way to create masks to your currency form fields with jQuery .

Comments
  • 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 :-?
  • jsfiddle.net/wjart6xa
  • Thank You i was trying it without the {reverse:true}; Once I added it everything works great.
  • @AdrianoResende, this should work. Just make sure to leave the {reverse: true} on
  • How to make the decimal value optional?
  • how to add dollar prefix? e.g $5.00