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

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

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

数字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

，因此这取决于您是否要这样做。