Autofoco a un campo con 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.

Definir el formulario

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

<form action="formulario.html" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" name="nombre" id="nombre"/>
  <label for="apellidos">Apellidos:</label>
  <input type="text" name="apellidos" id="apellidos"/>
  <input type="submit" value="Enviar"/>
</form>

Aplicar el atributo autofocus

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:

<form action="formulario.html" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" name="nombre" id="nombre" autofocus/>
  <label for="apellidos">Apellidos:</label>
  <input type="text" name="apellidos" id="apellidos"/>
  <input type="submit" value="Enviar"/>
</form>

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

Compatibilidad con navegadores

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.

Solución con Javascript

En este caso podemos recurrir a la implementación en Javascript. En este caso vamos a crear mediante Javascript un elemento INPUT ficticio 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():

if (!("autofocus" in document.createElement("input"))) {
  document.getElementById("nombre").focus();
}