¿Cómo puedo hacer que el campo de número HTML5 muestre los ceros finales?

Question

Tengo un campo:

<input type='number' /> 

me gustaría un puñetazo en 0.50 sin ella “corregirlo” a 0.5, por lo que sería mostrar 0.50.

Answer 1

He tenido un pequeño juego con esto y miré las especificaciones. Dice que debe ser un número de punto flotante válido. Hay una frase en el definition of a valid floating point number da lo que me llamó la atención:

El mejor representación del número n como un número de coma flotante es la cadena obtenida de aplicar el operador de ToString JavaScript para n.

Esto significa que el formato será siempre consistente con lo evaluando el número, a continuación, utilizando toString de JavaScript en ese número. Entonces no hay 0 finales.

Por lo tanto, vas a tener que recurrir a JavaScript. Esto no es sencillo porque document.getElementById('numInput').value = '0.50'; aún se corrige a 0.5, por lo que la validación no se desencadena en onchange donde se puede evitar la acción predeterminada, se desencadena internamente.

Ésta es la mejor solución que podría llegar a ... es un poco de un truco, y se necesita un poco de ajuste para la robustez, pero es de esperar que va a hacer lo que quiere:

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

Entonces, si el usuario desea ingresar el número escribiendo, cambia el tipo de entrada a texto, pero cuando lo hace, lo convierte de nuevo en un número.

Si siempre desea que los 0s se arrastran sin importar lo que el usuario escribe, entonces se podría hacer algo como esto:

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

Editar: Creo que la segunda solución es más en línea con lo que el usuario podría esperar, pero significa que si el usuario escribe 0.5 será forzado a 0.50, entonces depende si eso es lo que quiere.

Answer 2

Os adjunto un sobre ('cambio') evento a la entrada que desea tener detrás de

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

Sólo hace falta el valor, la arroja a un flotador, hace que en una cadena con el número 0 de lugares decimales, y lo pone de nuevo como el valor.