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

我有一个领域：

<input type='number' />

---

我想输入

0.50

，但不将其“更正”为

0.5

，因此它将显示

0.50

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

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

这意味着格式将始终与评估数字一致，然后在该数字上使用JavaScript的toString。那就没有了

因此，您将不得不求助于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
，因此这取决于您是否想要这样做。
我将一个on（'change'）事件附加到您希望具有尾随0的输入

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

它只是获取值，将其强制转换为浮点数，将其渲染为小数位数的字符串，然后将其作为值重新输入。
感谢编辑Paul，该标题更加简洁。通过更正小数并在文本和数字字段之间切换，这是一种非常聪明的解决方法。谢谢很高兴你喜欢。这是HTML5规范中的一个缺点，所以希望有人能意识到这一点，并在将来的某个时候修复它。好的解决方案。我对它进行了一点扩展，只影响指定的输入，并且还使用了“change”事件使它在按下输入按钮时仍保留后面的零。我不知道为什么它不能与普通的JS'onchange'一起使用，所以我在JQuery中使用了它。仅在Chrome上测试：
$（'input.float'）.each（函数（索引）{$（this）.change（函数（事件）{if（this.value==''）{return；}if（this.value.indexOf（'.'）==-1）{this.value=this.value+'.00'；}而（this.value.indexOf（'.'）>this.value.length-3{this.value=this.value+'0'；}）这不起作用（至少在FF 50中），因为更改“type”属性会触发模糊。因此，在你的代码中，焦点将类型更改为数字，这会触发模糊，将类型更改为文本，这会触发另一个模糊-你永远不能将焦点集中在元素上。@Coder它在Chrome和Firefox中工作，无论我写它时的版本是什么。我想我们一直在寻找一个好的解决方案，直到有人决定实现一个
格式
属性或类似的属性。这是一个很好的解决方案，解决了一个根本不应该存在的问题。可以在FF中确认，它仍然“更正”值并删除后面的零。