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>

Landau

.toFixed(2) try this – Gradely

This should be on live input – Landau

can you create a live demo? – Gradely

@guradio: please see my updated post, there I include my snippets. – Landau

I solve my issue using "$(".decimal").inputmask({ 'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0.00', rightAlign : true,clearMaskOnLostFocus: !1 });" – Landau

Answer 1

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>

Blunt

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 });" – Landau

I don't understand why when I do $('.decimal').inputmask('decimal'); it doesn't work. There is another thing to import ? – Salvage

@Salvage I can't really help without seeing your code. I'd suggest starting your own question including all relevant code. – Blunt

Answer 2

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.

Hardcore

Answer 3

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

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

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

I call it the West Coast Steamroller

Stealing

Unfortunately this doesn't work very well. Try entering 1.25 for example – Blunt