在JSF中使用JQuery Mask Plugin

Question

我正试图在这样的<h:inputText>中添加一个掩码以获得货币价值：

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

在此链接的文档中规定：http://igorescobar.github.io/jQuery-Mask-Plugin/，但它正如下所示：

并且不允许我输入任何内容。我将9更改为0，因此它允许我键入零的位置，但它仍然与文档页面上的演示不同。

有人可以帮我这个吗？

Answer 1

我的理解是你需要一个货币输入的掩码，你的行为应该从右到左填充输入。 因此，如果用户键入 [9]，结果将是 [0,09] ... 以下是一些可以理解问题的案例：

如果用户输入[8]，输入的结果应该是[0,08]吗？

如果用户输入[85]，输入的结果应该是[0,85]吗？

如果用户输入[855099]，结果应该是[8.550,99]吗？

在这种情况下，我发现用户输入的每个值都会除以 100。因此，让我们编写代码来执行此操作并格式化该值。

首先是我们的货币投入：

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

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

接下来让我们编写一些香草：

// 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