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

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