Wie kann ich im HTML5-Nummernfeld Nullen anzeigen lassen?

Hatte, habe ich ein wenig spielen, um mit diesem und schaute auf die spec. Es sagt, dass es sein muss eine gültige floating point Zahl. Es gibt einen Satz in der definition eine gültige floating point Zahl gibt es, die meine Aufmerksamkeit erregten:

Den beste Darstellung der Zahl n als eine floating-point-Zahl ist
der string abgerufen, die aus der Anwendung der JavaScript-operator ToString zu
n.

Dies bedeutet, dass das format wird immer im Einklang mit der Beurteilung, was die Zahl ist, dann mit JavaScript toString auf, die Anzahl. Also keine abschließenden 0s dann.

So, Sie gehen, um zum resort zu JavaScript. Dies ist nicht einfach, weil document.getElementById('numInput').value = '0.50'; bekommt noch korrigiert 0.5, so dass die Validierung nicht ausgelöst onchange wo die Standard-Aktion kann verhindert werden, Sie wird ausgelöst, intern.

Dies ist die beste Lösung, die ich gefunden habe... es ist ein bisschen ein hack und muss ein bisschen tüfteln für die Robustheit, aber hoffentlich werde tun, was Sie wollen:

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

So, wenn der Nutzer will, um geben Sie die Nummer durch Eingabe, schaltet die input type text, aber wenn Sie darauf klicken, wandelt es wieder in eine Zahl.

Wenn Sie wollen immer die nachfolgende 0s, egal was der Benutzer eingibt, dann könnte man es machen, so etwas wie dieses:

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');
});

Edit: ich denke, dass die zweite Lösung ist mehr inline mit dem, was die Benutzer erwarten, aber es bedeutet, dass, wenn der Benutzer Arten 0.5 es gezwungen werden zu 0.50, also es hängt davon ab, ob das, was Sie wollen.

InformationsquelleAutor der Antwort Nathan MacInnes