我怎样才能使HTML5号码字段显示尾随零？ [英] How can I make the HTML5 number field display trailing zeroes?

问题描述

我有一个字段：

<input type='number' />

我想冲入 0.50 如果没有将它纠正到 0.5 ，所以它会显示 0.50 。

I'd like to punch in 0.50 without it "correcting it" to 0.5, so it would display 0.50.

推荐答案

我已经对此有了一点发挥，并看了规范。它说它必须是一个有效的浮点数。在有效浮点的定义中有一句话编号它引起了我的注意：

I've had a little play around with this and looked at the spec. It says that it must be a valid floating point number. There's one sentence in the definition of a valid floating point number it gives which caught my attention:

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

The best representation of the number n as a floating point number is the string obtained from applying the JavaScript operator ToString to n.

这意味着该格式将始终与评估数字的内容一致，然后在该数字上使用JavaScript的toString。因此，没有结尾0。

This means that the format will always be consistent with assessing what the number is, then using JavaScript's toString on that number. So no trailing 0s then.

所以，你将不得不诉诸于JavaScript。这不是直截了当的，因为 document.getElementById（'numInput'）。value ='0.50'; 仍然被更正为 0.5 ，因此验证不会在 onchange 触发，其中可以阻止默认操作，它在内部触发。

So, you're going to have to resort to JavaScript. This isn't straightforward because document.getElementById('numInput').value = '0.50'; still gets corrected to 0.5, so the validation isn't triggered at onchange where the default action can be prevented, it's triggered internally.

这是我能提出的最好的解决方案......这有点像黑客攻击，需要对其进行一些调整以获得稳健性，但希望它能做到你想要的：

This is the best solution I could come up with... it's a bit of a hack, and will need a bit of tweaking for robustness, but hopefully it'll do what you want:

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

因此，如果用户想通过键入输入数字，它将输入类型切换为文本，但当他们点击它时，它会将其转换回一个数字。

So if the user wants to enter the number by typing, it switches the input type to text, but when they click it, it converts it back to a number.

如果您总是希望无论用户输入什么类型的尾随0，那么您可以这样做：

If you always want the trailing 0s no matter what the user types, then you could do it something like this:

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 ，所以这取决于是否你想要什么。

I think the second solution is more inline with what the user might expect, but it means that if the user types 0.5 it will be coerced to 0.50, so it depends if that's what you want.

这篇关于我怎样才能使HTML5号码字段显示尾随零？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！