Foco de formulário html padrão sem JavaScript

159

É possível definir o foco de entrada padrão em um formulário HTML sem usar JavaScript, por exemplo:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Desejo definir o foco padrão para qualquer uma das caixas de texto quando o formulário for carregado sem o uso de JavaScript (como desejo que o comportamento ocorra quando um usuário tiver o js desativado).

html accessibility Adam Jenkin
fonte

Respostas:

292

Você pode fazer isso em HTML5, mas, caso contrário, você deve usar JavaScript.

O HTML5 permite adicionar autofocusao seu elemento do formulário, por exemplo:

<input type="text" name="myInput" autofocus />

Isso funciona em navegadores que suportam HTML5 (ou melhor, navegadores que suportam essa parte específica do HTML5), mas como você sabe, nem todos podem usá-lo ainda.

Jake Lucas
fonte
22

Algo a ter em atenção ... se você definir um elemento de formulário focado, qualquer pessoa que utilize a Tecnologia Assistida (AT) como um leitor de tela precisará fazer backup para ver menus e qualquer outro conteúdo que esteja antes do campo focado.

Um método preferido, na minha opinião, é não definir o foco para nenhum campo, exceto um skip-link, se disponível. Isso lhes dá a opção de pular o conteúdo das páginas ou ler a página de cima para baixo.

Greg
fonte
Adicionar um skip-link também oculto visualmente, mas acessível por meio de leitores de tela, seria ótimo!
precisa saber é o seguinte
Eu tenho muito a aprender sobre acessibilidade. Obrigado por adicionar esta resposta para ajudar o resto de nós a aprender!
Andrew Steitz
3

Como já foi dito, sem Javascript, você não pode garantir um campo padrão. Uma opção alternativa que você pode querer experimentar, se você tiver vários campos que um usuário pode querer acessar, está usando o comandoaccesskey atributo Isso significa essencialmente que um usuário pode retornar a qualquer um dos campos instantaneamente mais tarde durante a navegação, o que pode ser útil para usuários de leitores de tela, etc.

O artigo da Wikipedias sobre esse assunto é bastante útil - http://en.wikipedia.org/wiki/Access_key


fonte
0

Isso não é possível sem alguma forma de script. Até a página inicial do Google requer Javascript para focar no campo de pesquisa.

Evan Mulawski
fonte
1
Isto é. O Google apenas adiciona javascript para os navegadores que não suportam HTML5. Algo que vale a pena considerar em qualquer aplicativo.
Mvbrakel
-8

Você pode usar o atributo tabindex e, no entanto, usar o valor mais baixo na caixa de texto padrão. Verifique aqui o suporte ao navegador:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

O site sugere que

(em quase todos os outros casos - ou seja, controles e links de formulário - o tabindex possui excelente suporte)

Cahit
fonte
3
O atributo "tabindex" não dá foco automático a nenhum elemento, nem mesmo a um elemento com "tabindex = 1". Pressionar <tab> (ou um clique) é necessário para focar o primeiro elemento na sequência de guias.
Clint Pachl