Atributo HTML Autofocus
En esta página encontrarás información sobre el atributo HTML autofocus, su uso, los elementos a los que se aplica y ejemplos prácticos.
El atributo HTML autofocus es un atributo boolean que indica al navegador que mueva automáticamente el foco del teclado a un elemento en cuanto se cargue la página (o el diálogo que lo contiene). El usuario puede comenzar a escribir o interactuar con ese elemento de inmediato, sin necesidad de hacer clic ni presionar Tab primero.
El atributo autofocus se introdujo en HTML5 y actualmente es compatible con todos los navegadores modernos (Chrome, Firefox, Safari y Edge lo implementaron de forma generalizada desde aproximadamente 2020).
Esta página cubre la sintaxis, los elementos a los que se aplica, el caso de uso moderno más habitual (un <dialog>), y las consideraciones de accesibilidad que debes evaluar antes de usarlo.
Sintaxis
autofocus es un atributo boolean, por lo que su mera presencia lo activa — no se necesita ningún valor.
<input autofocus>| Se aplica a | Cualquier elemento HTML que pueda recibir el foco. Se usa con mayor frecuencia en controles de formulario como <input>, <button>, <select> y <textarea>. Un <dialog> abierto con showModal() y un elemento <details> abierto también participan en la gestión del autofocus. |
|---|
Solo un autofocus por documento
El atributo autofocus solo puede establecerse en un único elemento por documento. Si lo añades a varios elementos, los navegadores lo aplican al primer elemento con el atributo en el orden del documento e ignoran el resto. Por tanto, no puedes usar autofocus para enfocar más de un campo a la vez — el foco es, por definición, un punto único.
Ejemplo básico
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>Example of the HTML "autofocus" attribute.</h1>
<form action="#">
Name: <input type="text" name="fname" autofocus /><br />
Surname: <input type="text" name="lname" /><br />
<input type="submit" />
</form>
</body>
</html>Cuando se carga la página, el campo "Name" recibe el foco y el cursor parpadea en él, listo para recibir entrada.
Autofocus en otros elementos
autofocus no se limita a los campos de texto. Funciona en cualquier control que pueda recibir el foco. El navegador enfoca el elemento; en el caso de un <select> o un <button>, este queda resaltado y listo para el teclado, y en el caso de un <textarea>, el cursor se coloca dentro de él.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autofocus on different controls</title>
</head>
<body>
<!-- A button can receive autofocus -->
<button type="button" autofocus>Start here</button>
<!-- A select can receive autofocus -->
<label>Country:
<select name="country">
<option>United States</option>
<option>Germany</option>
<option>France</option>
</select>
</label>
<!-- A textarea can receive autofocus -->
<label>Message:
<textarea name="message" rows="4"></textarea>
</label>
</body>
</html>Recuerda la regla del autofocus único: solo el <button> de arriba recibirá el foco, porque es el primer elemento que lleva el atributo.
Autofocus en un <dialog> (el uso moderno más habitual)
El uso más claro y justificado de autofocus es dentro de un <dialog> modal. Cuando el usuario abre deliberadamente un diálogo, enviar el foco al primer control relevante dentro de él es el comportamiento esperado — mantiene al usuario de teclado dentro del diálogo y listo para actuar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog with autofocus</title>
</head>
<body>
<button id="openBtn">Open dialog</button>
<dialog id="myDialog">
<form method="dialog">
<p>
<label>Your name:
<input type="text" name="name" autofocus />
</label>
</p>
<button value="ok">OK</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
const dialog = document.getElementById("myDialog");
document.getElementById("openBtn")
.addEventListener("click", () => dialog.showModal());
</script>
</body>
</html>Dado que el diálogo se abre en respuesta a una acción del usuario, mover el foco hacia él no resulta desorientador — es exactamente lo que el usuario solicitó. Por eso autofocus en un control de diálogo es mucho más seguro que autofocus en un campo de una página recién cargada.
Cuándo usar (y cuándo no usar) autofocus
Autofocus ahorra un clic e indica dónde empezar, pero también toma el control del teclado por parte del usuario. Úsalo cuando:
- La página o vista existe con el único propósito de esa entrada — una página de búsqueda dedicada, una pantalla de inicio de sesión o un paso con una sola pregunta.
- El foco se mueve en respuesta a una acción del usuario, como abrir un
<dialog>modal.
Evítalo cuando:
- El elemento se encuentra por debajo del pliegue o a mitad de una página con mucho contenido. Enfocarlo obliga al navegador a hacer scroll, lo que resulta brusco y omite el contenido superior.
- La página tiene contenido significativo que el usuario debe leer primero (un artículo con un cuadro de comentarios, por ejemplo). Aplicar autofocus al cuadro de comentarios arrastra al lector más allá del artículo.
Consideraciones de accesibilidad
autofocus afecta directamente a los usuarios de tecnología de asistencia, así que úsalo con cuidado.
- Interrupción para los lectores de pantalla. Los lectores de pantalla normalmente comienzan a leer desde la parte superior del documento. Cuando el foco se fuerza a un elemento en medio de la página, el lector puede saltar directamente a ese control y omitir silenciosamente el encabezado, la navegación y la introducción — el usuario llega "a mitad de página" sin contexto sobre dónde se encuentra.
- WCAG 2.4.3 (Orden del foco). Este criterio de éxito exige que el orden del foco preserve el significado y la operabilidad. Saltar el foco a un control arbitrario al cargar puede vulnerar el orden de lectura y tabulación esperado por el usuario. Reserva autofocus para los casos en que el elemento enfocado sea genuinamente el punto de partida lógico.
- Cambio de contexto inesperado. Mover el foco de repente y desplazar el viewport puede desorientar a usuarios con discapacidades cognitivas o visión reducida, que quizá no noten que la página se ha movido.
Una regla práctica: aplica autofocus a un elemento solo cuando hacerlo no provoque scroll en la página y cuando ese elemento sea sin lugar a dudas lo primero que el usuario quiere hacer.
Advertencia en dispositivos móviles
Varios navegadores móviles ignoran deliberadamente autofocus al cargar la página. En iOS, Safari para móvil no activa el teclado en pantalla ni mueve el foco automáticamente al cargar una página, y Chrome en Android se comporta de manera similar. Esta es una decisión de UX a nivel de sistema operativo: abrir automáticamente el teclado virtual cubriría el contenido, desplazaría el diseño y sorprendería al usuario antes de que haya decidido escribir.
No existe una solución fiable para forzar este comportamiento en estas plataformas, y tratar de simularlo con JavaScript (element.focus() al cargar) también está bloqueado a menos que ocurra dentro de un manejador de gesto del usuario. El enfoque aceptado es enfocar en respuesta a un toque — por ejemplo, llamando a .focus() cuando el usuario abre un diálogo o toca un botón de "búsqueda" — que es exactamente el patrón de diálogo mostrado anteriormente.
Compatibilidad con navegadores
autofocus forma parte del HTML Living Standard y cuenta con amplia compatibilidad: Chrome, Edge, Firefox y Safari lo han implementado durante años, y el comportamiento moderno (en cualquier elemento) está disponible en estos navegadores desde aproximadamente 2020. La restricción del teclado en móviles descrita anteriormente es un comportamiento deliberado de la plataforma, no una falta de soporte.