Como colocar o cursor (foco automático) na caixa de texto quando uma página é carregada sem suporte a javascript?

88

Eu tenho um formulário com alguns campos de texto e desejo colocar o cursor (foco automático) no primeiro campo de texto do formulário quando a página for carregada.

Eu quero fazer isso sem usar javascript.

css html Thavamani Kasi
fonte
1
<input.... tabindex="1" />
Abhitalks

Respostas:

146

Sim, é possível fazer sem suporte de javascript ..
Podemos usar o atributo de foco automático html5.
Por exemplo: 

<input type="text" name="name" autofocus="autofocus" id="xax" />

Se usá-lo (autofocus = "autofocus") no campo de texto significa que o campo de texto fica focado quando a página é carregada. Para mais detalhes:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Thavamani
fonte
5
A capitalização apropriada é na verdade autoFocus para JSX / React.
thadk
37

Basta adicionar a autofocusprimeira entrada ou área de texto.

<input type="text" name="name" id="xax" autofocus="autofocus" />
Rajnikant Kakadiya
fonte
1
Pelo menos no Chrome, autofocusnão funciona, mas autofocus="autofocus"funciona.
Jay Sullivan,
4

Isso vai funcionar:

OnLoad="document.myform.mytextfield.focus();"
Vishal
fonte
3
@putvande - o título diz "usando javascript", então dê um tempo.
Tomer
Ele disse sem suporte a JavaScript.
Alejandro Nava
3 
<body onLoad="self.focus();document.formname.name.focus()" >

formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />

it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.
Dewaz
fonte
O OP dizia "sem javascript".
Etienne Miret
1

Uma expansão para aqueles que mexiam um pouco como eu.

O seguinte trabalho (de W3):

<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />

É importante notar que isso não funciona em CSS. Ou seja, você não pode usar:

.first-input {
    autofocus:"autofocus"
}

Pelo menos não funcionou para mim ...

AER
fonte
-5

Às vezes, tudo o que você precisa fazer para ter certeza de que o cursor está dentro da caixa de texto é: clique na caixa de texto e quando um menu for exibido, clique em "Formatar caixa de texto" e depois clique na guia "caixa de texto" e finalmente modifique tudo quatro margens (esquerda, direita, superior e inferior), arrastando para baixo até que "0" apareça em cada margem.

Marisela Sainz
fonte