Using JQuery Mask Plugin with JSF

Question

i´m trying to add a mask into <h:inputText> like this for a monetary value:

<h:inputText id="preco" class="input-medium monetary-value" /> 
<script>$(function() {$('.monetary-value').mask('#.##0,00', {reverse: true});}</script>

as stipulated in the doc of this plugin on this link: http://igorescobar.github.io/jQuery-Mask-Plugin/, but it's being compilated like this:

and doesn't let me type anything. I changed 0 for 9, so it lets me type on the place of the zeros, but it's still behaving diferent of the demo on the docs page.

Can someone help me with this?

Answer 1

What I am understanding is that you need a mask for monetary inputs and your behavior should fill the input from right to left. So, if the user types [9] the result will be [0,09] ... Below are some cases to understand the problem:

If the user types [8], should the result in the entry be [0,08]?

If the user types [85], should the result in the entry be [0,85]?

If the user types [855099], should the result in the entry be [8.550,99]?

In this case, I found that each value entered by the user will be divided by 100. So, let's write a code to do this and format the value.

First our monetary input:

<label for="monetary-input">R$</label>

<input id="monetary-input" type="text" maxlength="10" placeholder="0,00"/>

Second lets code some vanila:

// Getting the monetary-input element
const selectElement = document.getElementById('monetary-input');
// Listening the keyup event, you can customize to others events
selectElement.addEventListener('keyup', (e) => {
    
    var value = e.target.value;
    // Parsing to int the value typed to get exacly the numbers that the user inform and desconsidering every character that is not a number;
    value = parseInt(value.replace(/[\D]+/g, '')) / 100;

    console.log(value);
    // Formatting the number, check locales options from Intl (Native Class from JS)
    value = Intl.NumberFormat('pt-BR', { minimumFractionDigits: 2 }).format(
      value
    );
    // Setting the value proccessed;
    selectElement.value = value;

    if (value === 'NaN') {
      selectElement.value = '';
    }
}); 

A working example can be checked here