Question

我有一个字段：

<input type='number' />

我想将0.50打入0.5而不将其“纠正”至0.50，因此会显示{{1}}。

Answer 1

我有一点玩这个并看了看规格。它说它必须是一个有效的浮点数。 definition of a valid floating point number中有一句话引起了我的注意：

最佳表示数字n作为浮点数是从JavaScript运算符ToString应用到的字符串 Ñ

这意味着格式将始终与评估数字是一致的，然后在该数字上使用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));
});

它只取值，将其转换为浮点数，将其呈现为字符串的小数位数，并将其作为值重新输入。

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

2 个答案: