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

Tengo un campo:

 

Me gustaría ingresar 0.50 sin “corregirlo” a 0.5 , por lo que mostraría 0.50 .

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 oración en la definición de un número de punto flotante válido que me llamó la atención:

La mejor representación del número n como número de coma flotante es la cadena obtenida al aplicar el operador de JavaScript ToString a n.

Esto significa que el formato siempre será coherente con la evaluación de cuál es el número y luego usará el toString de JavaScript en ese número. Entonces no hay 0 finales.

Entonces, 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.

Esta es la mejor solución que se me ocurrió … es un poco complicado, y necesitará un poco de ajuste para la robustez, pero espero que haga lo que quiera:

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

Por lo tanto, 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 quiere los 0 finales sin importar lo que escriba el usuario, entonces podría hacerlo de la siguiente manera:

 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 está más en línea con lo que el usuario podría esperar, pero significa que si el usuario escribe 0.5 se verá forzado a 0.50 , por lo que depende si eso es lo que desea.

Adjunté un evento activado (‘cambio’) a la entrada que desea que tenga 0’s

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

Simplemente toma el valor, lo convierte en un flotante, lo convierte en una cadena con el número de decimales y lo vuelve a poner como valor.