3

我正在尝试<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/，但它的编译如下：

在此处输入图像描述

并且不让我输入任何内容。我将 0 更改为 9，所以它可以让我在零的位置输入，但它的行为仍然与文档页面上的演示不同。

有人可以帮我弄这个吗？

4

1 回答 1

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

其次让我们编写一些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 = '';
    }
});

可以在此处检查一个工作示例

于 2021-03-26T13:36:04.950 回答