2 位小数输入掩码

Posted 2023-05-08

【中文标题】2 位小数输入掩码

【英文标题】：2 decimal places inputmask

【发布时间】：2016-08-12 15:05:46

【问题描述】：

我正在使用RobinHerbots inputmask ，我怎样才能使22.30 或2.15 等小数点后两位？就像在输入掩码上设置的“货币”，但没有逗号（根据值长度自动生成）和货币符号。以下是我尝试过的sn-p，但不幸的是它们都不起作用，请问有什么帮助、建议、想法、线索、建议吗？

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

【问题讨论】：

.toFixed(2) 试试这个

这应该是实时输入

你能创建一个现场演示吗？

@guradio：请查看我的更新帖子，其中包含我的 sn-ps。

我使用 "$(".decimal").inputmask( 'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits' : 2, 'digitsOptional': false, 'placeholder': '0.00', rightAlign : true,clearMaskOnLostFocus: !1 );"

【参考方案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>

【讨论】：

谢谢，我使用 "$(".decimal").inputmask( 'alias': 'decimal', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0.00', rightAlign : true,clearMaskOnLostFocus: !1 );"

我不明白为什么当我做$('.decimal').inputmask('decimal'); 时它不起作用。还有要导入的东西吗？

@John 如果没有看到您的代码，我真的无能为力。我建议开始您自己的问题，包括所有相关代码。

【参考方案2】：

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

$(".mask").inputmask('Regex', regex: "^[0-9]1,6(\\.\\d1,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(\\,\\d1,2)?$");

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

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

【参考方案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;

我称它为西海岸压路机