Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

[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

Posted: 21/10/2011 17:09 por Gonzalo Perez | con no comments
Archivado en:
Comparte este post: