2位小数输入掩码

Question

我正在使用 RobinHerbots inputmask ，我怎样才能保留 2 位小数，例如 22.30 或 2.15？像 'currency' 在输入掩码上设置但没有逗号（根据值长度自动生成）和货币符号。以下是我尝试过的代码片段，但不幸的是 none 有效，请提供任何帮助、建议、想法、线索、建议？

$(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>

Answer 1

根据 documentation 定义数字的正确语法是使用 9 字符，因此在您的情况下应该是 99[.99]。试试这个：

$(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>

Answer 2

如果您的系统是英文的，请使用此正则表达式：

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\.\d{1,2})?$"});

如果您的系统使用巴西葡萄牙语，请使用：

导入：

<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})?$"});

这是因为在巴西葡萄牙语中我们写“1.000.000,00”而不是英语中的“1,000,000.00”，所以如果您使用“.”系统不会理解小数点。

就是这样，希望对大家有所帮助。我花了很多时间来理解它。

Answer 3

刚刚想出一个简单高效的方法，无需 jQuery 或任何库：

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;
}

我称之为西海岸压路机

2位小数输入掩码

2 decimal places inputmask

javascript

jquery

input-mask

jquery-inputmask