2 decimal places inputmask
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
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>
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.