[Tips] HTML5 Input Number con Decimales

Hola, por problemas de tiempo no me podido actualizar el blog tanto como quiero, tengo varios articulos a medio escribir, pero ya inventaré algo para ausentarme del trabajo y tener tiempo para esto Sonrisa.

Ahora un pequeño tip, estoy desarrollando una Web Móvil y el usuario quiere ingresar numeros en un campo de texto HTML, para esto es perfecto el nuevo tipo de input que nos trae HTML5, el number y no es nada más que:

  <input type="number" name="ancho" id="ancho"  required  />

También podemos especificar el máximo y el mínimo de datos aceptados, así como además solo con agregar la propiedad Required, el navegador valida por nosotros que el usuario llene la caja de texto, genial!, pero había un problema, necesitaba que el usuario pudiese ingresar números decimales. Y el tema es muy simple, solo agregamos el step, que corresponde al incremento

<input type="number" step="0.01" name="ancho"  id="ancho" required autofocus />

Agregué el atributo autofocus, también muy útil, me imagino que no necesita mayor explicación este atributo. Sonrisa

image

Y listo!, así de sencillo, de hecho HTML5 está hecho para que las cosas que antes eran complicadas , ya no lo sean.

Saludos!
Chalalo

Deja un comentario

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