2 decimal places inputmask

Question

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>

@guradio: please see my updated post, there I include my snippets. — Juliver Galleto, Apr 20 '16 at 06:29
I solve my issue using "$(".decimal").inputmask({ 'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0.00', rightAlign : true,clearMaskOnLostFocus: !1 });" — Juliver Galleto, Apr 20 '16 at 06:45

score 11 · Accepted Answer · answered Apr 20 '16 at 06:33

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>

Thank you, I solve my issue using "$(".decimal").inputmask({ 'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0.00', rightAlign : true,clearMaskOnLostFocus: !1 });" — Juliver Galleto, Apr 20 '16 at 06:45
I don't understand why when I do `$('.decimal').inputmask('decimal');` it doesn't work. There is another thing to import ? — John, Oct 17 '19 at 09:41
@John I can't really help without seeing your code. I'd suggest starting your own question including all relevant code. — Rory McCrossan, Oct 17 '19 at 09:42

score 3 · Answer 2 · answered Jun 12 '19 at 13:25

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})?$"});

Its because in Brazilian Portuguese we write "1.000.000,00" and not "1,000,000.00" like in English, so if you use "." the system will not understand a decimal mark.

It is it, I hope that it help someone. I spend a lot of time to understand it.

score 3 · Answer 3 · answered Feb 22 '20 at 13:49

Just came up with an easy and highly efficient method without jQuery or any libraries:

HTML:

<input type="number" oninput="inputChange()" />

Javascript:

function inputChange(){
    let value = Number(document.activeElement.value);
    let pos = document.activeElement.selectionStart;
    document.activeElement.value = value.toFixed(2);

    document.activeElement.selectionStart = pos;
    document.activeElement.selectionEnd = pos;
}

I call it the West Coast Steamroller

2 decimal places inputmask

3 Answers3