Atributo HTML Autofocus
Nesta página encontra informações sobre o atributo HTML autofocus, a sua utilização, os elementos a que se aplica e exemplos práticos.
O atributo HTML autofocus é um atributo boolean que indica ao navegador para mover automaticamente o foco do teclado para um elemento assim que a página (ou o diálogo que o contém) é carregada. O utilizador pode começar a escrever ou interagir com esse elemento imediatamente, sem precisar de clicar ou usar Tab para lá chegar primeiro.
O atributo autofocus foi introduzido no HTML5 e é agora suportado por todos os navegadores modernos (Chrome, Firefox, Safari e Edge implementaram-no amplamente desde cerca de 2020).
Esta página aborda a sintaxe, os elementos a que se aplica, o caso de uso moderno mais comum (um <dialog>) e as considerações de acessibilidade que deve ponderar antes de utilizá-lo.
Sintaxe
autofocus é um atributo boolean, pelo que a sua simples presença o ativa — não é necessário nenhum valor.
<input autofocus>| Aplica-se a | Qualquer elemento HTML focalizável. É mais comummente utilizado em controlos de formulário como <input>, <button>, <select> e <textarea>. Um <dialog> aberto com showModal() e um elemento <details> aberto também participam no tratamento do autofocus. |
|---|
Apenas um autofocus por documento
O atributo autofocus só pode ser definido em um único elemento por documento. Se o adicionar a vários elementos, os navegadores aplicam-no ao primeiro elemento com o atributo na ordem do documento e ignoram os restantes. Por isso, não é possível usar autofocus para focar mais de um campo ao mesmo tempo — o foco é, por definição, um único ponto.
Exemplo 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>Quando a página é carregada, o campo "Name" fica em foco e o cursor pisca lá, pronto para receber entrada.
Autofocus noutros elementos
autofocus não se limita a campos de texto. Funciona em qualquer controlo focalizável. O navegador foca o elemento; para um <select> ou <button> isso significa que fica realçado e pronto para uso pelo teclado, e para um <textarea> o cursor é colocado dentro dele.
<!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>Recorde a regra de autofocus único: apenas o <button> acima receberá o foco, pois é o primeiro elemento que contém o atributo.
Autofocus num <dialog> (uso moderno mais comum)
O uso mais claro e defensável de autofocus é dentro de um <dialog> modal. Quando um utilizador abre deliberadamente um diálogo, mover o foco para o primeiro controlo relevante dentro dele é o comportamento esperado — mantém o utilizador de teclado dentro do diálogo e pronto para agir.
<!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>Como o diálogo abre em resposta a uma ação do utilizador, mover o foco para dentro dele não é desorientador — é exatamente o que o utilizador pediu. É por isso que autofocus num controlo de diálogo é muito mais seguro do que autofocus num campo de uma página recém-carregada.
Quando usar (e quando não usar) autofocus
O autofocus poupa um clique e indica por onde começar, mas também assume o controlo do teclado do utilizador. Use-o quando:
- A página ou vista existe com o único propósito daquela entrada — uma página de pesquisa dedicada, um ecrã de login ou um passo com uma única pergunta.
- O foco se move em resposta a uma ação do utilizador, como abrir um
<dialog>modal.
Evite-o quando:
- O elemento está abaixo da dobra ou a meio de uma página com muito conteúdo. Focá-lo obriga o navegador a fazer scroll, o que é perturbador e ignora o conteúdo acima.
- A página tem conteúdo relevante que o utilizador deve ler primeiro (um artigo com uma caixa de comentários, por exemplo). Aplicar autofocus à caixa de comentários arrasta o leitor para lá do artigo.
Considerações de acessibilidade
autofocus afeta diretamente utilizadores de tecnologias assistivas, por isso deve ser utilizado com cuidado.
- Perturbação dos leitores de ecrã. Os leitores de ecrã normalmente começam a ler a partir do topo do documento. Quando o foco é forçado para um elemento a meio da página, o leitor pode saltar diretamente para esse controlo e ignorar silenciosamente o cabeçalho, a navegação e a introdução — o utilizador fica "a meio da página" sem contexto sobre onde se encontra.
- WCAG 2.4.3 (Ordem do Foco). Este critério de sucesso exige que a ordem de foco preserve o significado e a operabilidade. Saltar o foco para um controlo arbitrário no carregamento pode violar a ordem de leitura e de Tab esperada pelo utilizador. Reserve o autofocus para casos em que o elemento focado é genuinamente o ponto de partida lógico.
- Mudança de contexto inesperada. Mover repentinamente o foco e fazer scroll no viewport pode desorientar utilizadores com deficiências cognitivas ou baixa visão, que podem não notar que a página se moveu.
Uma regra prática: aplique autofocus a um elemento apenas quando fazê-lo não provoca scroll na página e quando esse elemento é inequivocamente a primeira coisa que o utilizador pretende fazer.
Ressalva para dispositivos móveis
Vários navegadores móveis ignoram intencionalmente autofocus no carregamento da página. No iOS, o Safari móvel não abre o teclado no ecrã nem move o foco automaticamente a partir do carregamento de uma página, e o Chrome no Android comporta-se de forma semelhante. Esta é uma decisão de UX ao nível do sistema operativo: abrir automaticamente o teclado virtual cobriria o conteúdo, alteraria o layout e surpreenderia o utilizador antes de ele decidir escrever.
Não existe nenhuma solução fiável de "forçar de qualquer maneira" nestas plataformas, e tentar simulá-lo com JavaScript (element.focus() no carregamento) também é bloqueado a menos que ocorra dentro de um handler de gesto do utilizador. A abordagem aceite é focar em resposta a um toque — por exemplo, chamar .focus() quando o utilizador abre um diálogo ou toca num botão de "pesquisa" — que é exatamente o padrão de diálogo mostrado acima.
Compatibilidade com navegadores
autofocus faz parte do HTML Living Standard e tem amplo suporte: Chrome, Edge, Firefox e Safari implementaram-no há anos, com o comportamento moderno (em qualquer elemento) disponível nestes navegadores desde aproximadamente 2020. A restrição do teclado móvel descrita acima é um comportamento deliberado da plataforma, não uma falta de suporte.