feed twitter facebook LinkedIn facebook

HTML5 » Autofoco a un campo con HTML5

febrero 5, 2012 por Víctor Cuervo 8 Comentarios Imprimir Imprimir

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();
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: ,

Artículos relacionados:

8 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Bitacoras.com
    febrero 5, 2012 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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 Javascri……

  2. Semana 30.enero.2012 | aulambra.com
    febrero 6, 2012 #

    [...] Autofoco a un campo con HTML5 [...]

  3. Pablo
    febrero 27, 2013 #

    Hola!,

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

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

  4. Gerado Gennai
    marzo 19, 2013 #

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

  5. Víctor Cuervo
    marzo 20, 2013 #

    @Gerado Gennai,

    Me alegro que te haya sido útil. :-D

  6. franco
    noviembre 17, 2013 #

    gracias maestro! justo lo q buscaba

  7. Víctor Cuervo
    noviembre 17, 2013 #

    @franco,
    Me alegro que te haya servido. :-D

  8. Víctor Cuervo
    noviembre 17, 2013 #

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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*