javascriptjqueryinput-maskjquery-inputmask

2 decimal places inputmask

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 sign. Below is my snippet of what I've tried but unfortunately none of them works, any help, suggestions, ideas, clues, recommendations please?

$(document).ready(function(){
  $(".decimal").inputmask('decimal',{rightAlign: true});
  $(".currency").inputmask('currency',{rightAlign: true  });
  $(".custom1").inputmask({ mask: "**[.**]", greedy: false, definitions: { '*': { validator: "[0-9]" } }, rightAlign : true });
  $(".custom2").inputmask({ 'alias' : 'decimal', rightAlign: true, 'groupSeparator': '.','autoGroup': true });
  $(".custom3").inputmask({ 'alias' : 'decimal', 'mask' : "**[.**]", rightAlign: true});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<input type="text" class="decimal" /><br>
<input type="text" class="currency" /><br>
<input type="text" class="custom1" /><br>
<input type="text" class="custom2" /><br>
<input type="text" class="custom3" value="0" /><br>

Solution

  • According to the documentation the correct syntax for defining numeric figures is to use the 9 character, so in your case this would be 99[.99]. Try this:

    $(document).ready(function() {
  $(".decimal").inputmask('decimal', {
    rightAlign: true
  });
  $(".currency").inputmask('currency', {
    rightAlign: true
  });
  $(".custom1").inputmask({
    mask: "99[.99]",
    greedy: false,
    definitions: {
      '*': {
        validator: "[0-9]"
      }
    },
    rightAlign: true
  });
  $(".custom2").inputmask({
    'alias': 'decimal',
    rightAlign: true,
    'groupSeparator': '.',
    'autoGroup': true
  });
  $(".custom3").inputmask({
    'alias': 'decimal',
    'mask': "99[.99]",
    rightAlign: true
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<input type="text" class="decimal" /><br>
<input type="text" class="currency" /><br>
<input type="text" class="custom1" /><br>
<input type="text" class="custom2" /><br>
<input type="text" class="custom3" value="0" /><br>