HTML5数字输入 - 始终显示2位小数

Question

是否有任何方法可以格式化input[type='number']值以始终显示2位小数？

示例:我想看"0.00"而不是0.

谢谢

Answer 1

你不能真的,但你可能是一个中途步骤:

<input type='number' step='0.01' value='0.00' placeholder='0.00' />

Answer 2

解决了建议,并添加了一个jQuery来强制整数格式 parseFloat($(this).val()).toFixed(2)

Answer 3

使用该step属性将启用它.它不仅决定了它应该循环多少,而且确定允许的数量.使用step="0.01" 应该做的技巧,但这可能取决于浏览器如何遵守标准.

<input type='number' step='0.01' value='5.00'>

Answer 4

input="number" step="0.01"在Chrome中使用工作的解决方案非常适合我,但在某些浏览器中无法使用,特别是在我的情况下使用Frontmotion Firefox 35 ..我必须支持.

我的解决方案是使用Igor Escobar的jQuery Mask插件进行jQuery,如下所示:

<script src="/your/path/to/jquery-mask.js"></script>
<script>
    $(document).ready(function () {
        $('.usd_input').mask('00000.00', { reverse: true });
    });
</script>

<input type="text" autocomplete="off" class="usd_input" name="dollar_amt">

这很好用,当然应该检查提交后的值:)注意,如果我不必为浏览器兼容性这样做,我会使用@Rich Bradshaw的上述答案.

Answer 5

根据@Guilherme Ferreira 的这个答案，您可以在parseFloat每次字段更改时触发该方法。因此，该值始终显示两位小数，即使用户通过手动键入数字来更改该值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".floatNumberField").change(function() {
            $(this).val(parseFloat($(this).val()).toFixed(2));
        });
    });
</script>

<input type="number" class="floatNumberField" value="0.00" placeholder="0.00" step="0.01" />

Answer 6

如果您来到这里只是想知道如何限制为 2 个小数位，我有一个本机 javascript 解决方案：

Javascript：

function limitDecimalPlaces(e, count) {
  if (e.target.value.indexOf('.') == -1) { return; }
  if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
    e.target.value = parseFloat(e.target.value).toFixed(count);
  }
}

HTML：

<input type="number" oninput="limitDecimalPlaces(event, 2)" />

请注意，这不能 AFAIK，请使用数字输入来防御此chrome 错误。