Comentário: Uma função HTML simples agora nos permite localizar automaticamente o foco de entrada nos elementos necessários após o carregamento da página. É concluído por meio de um atributo chamado AutoFocus. Amigos interessados podem aprender sobre isso.
Texto original: atributo HTML5 AutoFocus
Data de lançamento original: 27 de agosto de 2012
Tempo de tradução: 6 de agosto de 2013
O HTML5 lançou muitas coisas excelentes para nós.
No passado, as tarefas que queríamos concluir com JavaScript e Flash, como verificação de formulário, prompts de entrada em branco da caixa de entrada (espaço reservado para entrada), upload e download de arquivos do cliente (nomeação de arquivos do lado do cliente) e reprodução de áudio/vídeo agora podem ser concluídos com HTML básico. Outro recurso simples HTML é que agora ele nos permite localizar automaticamente o foco de entrada no elemento necessário após a carga da página e concluí -lo através de uma propriedade chamada AutoFocus.
O código é tão simples quanto o seguinte:
<!- Tudo isso funciona! ->
<Input AutoFocus = "AutoFocus" />
<Button AutoFocus = "AutoFocus"> oi! </botão>
<textAea autofocus = "AutoFocus"> </sexttarea>
Depois que a propriedade AutoFocus for definida, os elementos de entrada, textarea e botão serão selecionados automaticamente após o carregamento da página (ou seja, obtendo foco). Eu tentei outros elementos (como a tag h1), tabindex = 0, mas a propriedade AutoFocus não tem efeito sobre esses elementos.
Esse atributo é útil no objetivo principal de obter páginas cujo principal objetivo é coletar informações, como o Google Homepage (99% dos casos são usados para pesquisa) ou assistentes de instalação on -line (como o instalador do WordPress). E o mais importante é que o JavaScript não requer participação.
O código de página completo é o seguinte:
<! Doctype html>
<html>
<head>
<title> HTML5 Teste de atributo de foco automático </ititle>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "original = http: //davidwalsh.name/autofocus">
</head>
<Body>
<!- Em princípio, apenas um dos três elementos a seguir pode ser definido. Se vários elementos estiverem definidos, o último elemento deve obter o foco->
<!-
->
<div>
<Input AutoFocus = "AutoFocus" />
<Button AutoFocus = "AutoFocus"> oi! </botão>
<textAea autofocus = "AutoFocus"> </sexttarea>
</div>
</body>
</html>