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

Question

我有一个字段：

<input type='number' />

我想在不对0.5进行“更正”的情况下输入0.50，这样它就会显示0.50。

Answer 1

我在这方面做了一些工作，并查看了规范。它说它必须是一个有效的浮点数。它给出的definition of a valid floating point number中有一句话引起了我的注意：

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

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

因此，您将不得不求助于JavaScript。这并不简单，因为document.getElementById('numInput').value = '0.50';仍然被更正为0.5，所以在可以阻止默认操作的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，因此这取决于这是否是您想要的。

Answer 2

我将一个on('change')事件附加到您希望在输入后带有0的输入

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

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