如何使 HTML5 数字字段显示尾随零？

Question

我有一个字段：

<input type='number' />

我想输入 0.50 而不将其“更正”为 0.5，因此它会显示 0.50。

Answer 1

我将 on('change') 事件附加到您想要尾随 0 的输入，

$('.number-input').on('change', function(){
    $(this).val(parseFloat($(this).val()).toFixed(2));
});

它只需获取该值，将其转换为浮点数，将其呈现为小数位数的字符串，然后将其放回价值。

Answer 2

我对此进行了一些尝试并查看了规范。它说它必须是一个有效的浮点数。 有效浮点的定义中有一句话它给出的数字引起了我的注意：

数字 n 作为浮点数的最佳表示是
通过应用 JavaScript 运算符 ToString 获得的字符串

这意味着格式将始终与评估数字是什么，然后对该数字使用 JavaScript 的 toString 保持一致。所以没有尾随 0。

因此，您将不得不求助于 JavaScript。这并不简单，因为 document.getElementById('numInput').value = '0.50'; 仍会更正为 0.5，因此验证不会在 < code>onchange 可以阻止默认操作，它是在内部触发的。

这是我能想到的最好的解决方案......这有点麻烦，并且需要进行一些调整以提高鲁棒性，但希望它能达到您想要的效果：

var numInput = document.getElementById('numInput');
numInput.addEventListener('keypress', function () {
    this.setAttribute('type', 'text');
});
numInput.addEventListener('click', function () {
    this.setAttribute('type', 'number');
});

因此，如果用户想通过以下方式输入数字键入时，它将输入类型切换为文本，但是当他们单击它时，它将其转换回数字。

如果无论用户输入什么，您总是想要尾随 0，那么您可以这样做：

var numInput = document.getElementById('numInput');
numInput.addEventListener('blur', function () {
    if (this.value === '') {
        return;
    }
    this.setAttribute('type', 'text');
    if (this.value.indexOf('.') === -1) {
        this.value = this.value + '.00';
    }
    while (this.value.indexOf('.') > this.value.length - 3) {
        this.value = this.value + '0';
    }
});
numInput.addEventListener('focus', function () {
    this.setAttribute('type', 'number');
});

编辑： 我认为第二个解决方案更符合用户可能的期望，但这意味着如果用户输入 0.5 ，它将被强制为 0.50，所以这取决于这是否是您想要的。