Menu

Input type number y números decimales

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:

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:

Con esto nuestro input de tipo numerico ya acepta números decimales con total normalidad.

Input type number y números decimales

Input type number y números decimales

Referencias:

Obtener cosas como esta
En tu E-Mail

Suscríbase a nuestra lista de correo y obtenga cosas interesantesa su E-mail.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar