Input type number y números decimales. HTML5 define un tipo “number” para los input de un formulario pero por defecto solo admite números enteros. ¿Y cómo hacemos para que el input type number acepte números decimales? Esto es una gran pregunta que estimo que la mayoría de nosotros se encontrara cuando estemos desarrollando una página web o una aplicación web.
Con la llegada del HTML5 la manera de validar formularios se convirtió en algo muy sencillo, anteriormente se hacía mediante JavaScript o Jquery, pero para que incrementar nuestras líneas de código ya que la versión HTML5 ya viene incorporadas esas opciones de validación con una mínima cantidad de líneas de código. Cuando estamos desarrollando un formulario y necesitamos que un input solo acepte datos de tipo numérico lo más rápido y “correcto” en HTML es hacer:
<input name="un_numero_decimal" value="" type="number">
Correcto, con esto logramos que el input solo acepte números mas no texto, tirándonos un error si colocamos texto dentro de este campo. Pero si deseamos ingresar datos con decimales ahí es en donde vienen los problemas, que nosotros con un poco de conocimiento de las etiquetas HTML5 podemos resolver rápidamente.
Entonces, ¿qué está sucediendo aquí? ¿Es un error del navegador? Firefox no falla, esto quiere decir que es un fallo en la programación del nuevo lenguaje HTML5.
Cabe resaltar que en realidad no es un error; el campo (input) de formulario se comporta como se define por el W3C. Campos de entrada numéricos pueden tener atributos adicionales «min» y «step», que limitan el rango de valores permitidos en su entrada.
- El atributo «min» es bastante obvio: es el valor mínimo su número puede ser.
- El atributo «step» es menos intuitiva: al jugar con diferentes valores, lo más probable es hacer ejercicio que controla el aumento / disminución al hacer clic en los botones arriba / abajo en el campo.
Input type number y números decimales
Pero con este código nos daremos cuenta muy pronto que no nos deja introducir números decimales del tipo 4.5 ó 5.90. Esto se soluciona favorablemnte y d emaner ainmediata de la siguiente manera:
<input value="" type="number" step="any">
Con esto nuestro input de tipo numerico ya acepta números decimales con total normalidad.
Referencias:
- Numeros decimales input
- Input Numeros
- HTML5 Input
tambien acepta la letra «e»