Autofoco a un campo con HTML5

05/feb/2012 HTML5 , 6 Comentarios
Logo HTML5

Antes de tener la especificación de HTML5 si queríamos realizar un autofoco a un campo, es decir, que al cargar una página el foco del cursor se pusiese en un campo de un formulario, teníamos que utilizar código Javascript.
Ahora, gracias a HTML5, podemos acometer esta labor de una forma sencilla.

Lo primero será definir el formulario. En nuestro caso tendrá dos simples campos de entrada de texto:

  1. <label for="nombre">¿Cómo te llamas?</label>
  2. <input id="nombre" type="text" />
  3. <label for="edad">¿Cuántos años tienes?</label>
  4. <input id="edad" type="text" />
  5. </form>

Si lo que queremos es que el autofoco se realice sobre el campo INPUT nombre, le añadiremos el atributo autofocus. Quedándonos el siguiente código:

  1. <label for="nombre">¿Cómo te llamas?</label>
  2. <input id="nombre" autofocus type="text" />
  3. <label for="edad">¿Cuántos años tienes?</label>
  4. <input id="edad" type="text" />
  5. </form>

El atributo autofocus solo puede aplicarse sobre un único campo del formulario

Solo tenemos que tener cuidado de una cosa y es que la especificación HTML5 todavía no está terminada ni implementada en todos los navegadores web. Es por ello que puede ser que no funcione correctamente. Las versiones mínimas en las que funciona son Chrome 6, Firefox 4, Opera 11, Safari 5 e Internet Explorer 10. Quizás la versión del Internet Explorer sea la que más problemas pueda ocasionarte.

En este caso podemos recurrir a la implementación en Javascript. En este caso vamos a crear mediante Javascript un elemento INPUT ficiticio y vamos a comprobar si este tiene el atributo autofocus o no. En caso de que no lo tenga lanzaremos el código Javascript con el método .focus()

  1. if(!("autofocus" in document.createElement("input")))
  2. document.getElementById("nombre").focus();

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

6 comentarios en “Autofoco a un campo con HTML5”

Víctor Cuervo

Víctor Cuervo

@Pablo, se me había pasado lo de la errata. Solucionado. Gracias por el aviso.

Víctor Cuervo

Víctor Cuervo

@franco,
Me alegro que te haya servido. 😀

Víctor Cuervo

franco

gracias maestro! justo lo q buscaba

Víctor Cuervo

Víctor Cuervo

@Gerado Gennai,

Me alegro que te haya sido útil. 😀

Víctor Cuervo

Gerado Gennai

Excelente explicación sobre focus y autofocus, me fue muy util.
Gracias

Víctor Cuervo

Pablo

Hola!,

Un tip sobre el post (por cierto muy bueno).
En la línea:

tienes un error de escritura en la palabra “autofoucs”.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*