CODEWITHSUNDEEP
javascriptjqueryinput-maskjquery-inputmask
Juliver Galleto
Juliver Galleto

Reputation: 9037

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>

Upvotes: 12

Views: 60975

Answers (4)

Oscar Urbina Tellez
Oscar Urbina Tellez

Reputation: 31

I was facing a similar scenario for an input that should handle only positive and decimal values. I solved this by adding the attribute integerDigits: 2 and digits: 2. The main difference with my implementation is that I'm using data-imputmask attribute:

<input type="text" class="form-control input-mask" value="{{ $product->msrp_upper_limit }}"
name="msrp_upper_limit" id="msrp_upper_limit"
data-inputmask="
    'alias': 'decimal',
    'integerDigits': 2,
    'digits': 2, 'digitsOptional': true,
    'placeholder': '0', 'autoGroup': true, 'removeMaskOnSubmit': true,
    'allowMinus': false, 'radixPoint': '.', 'rightAlign': true,
    'max': 99.99,
    'min': 0.01
    "/>

But I'm sure that you can add same attributes on your Javascript implementation.

Just as an extra comment, in my case mask: "99[.99]" was not working as expected.

Upvotes: 0

story
story

Reputation: 71

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

Upvotes: 3

Michel Fernandes
Michel Fernandes

Reputation: 1275

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.

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 13

Related Questions