Comment placer le curseur (mise au point automatique) dans la zone de texte lorsqu'une page est chargée sans prise en charge de JavaScript?

89

J'ai un formulaire avec des champs de texte et je souhaite placer le curseur (mise au point automatique) sur le premier champ de texte du formulaire lorsque la page est chargée.

Je veux le faire sans utiliser de javascript.

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

Réponses:

146

Ya son possible de se passer du support de javascript ..
Nous pouvons utiliser l'attribut de mise au point automatique html5
Par exemple: 

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

Si vous l'utilisez (autofocus = "autofocus") dans le champ de texte, cela signifie que le champ de texte se concentre lorsque la page est chargée. Pour plus de détails:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Thavamani
la source
6
La capitalisation appropriée est en fait la mise au point automatique pour JSX / React.
thadk
37

Ajoutez simplement la autofocuspremière entrée ou zone de texte.

<input type="text" name="name" id="xax" autofocus="autofocus" />
Rajnikant Kakadiya
la source
1
Au moins dans Chrome, autofocusne fonctionne pas, mais le autofocus="autofocus"fait.
Jay Sullivan
4

Cela fonctionnera:

OnLoad="document.myform.mytextfield.focus();"
Vishal
la source
3
@putvande - le titre dit "en utilisant javascript" alors laissez-lui une pause.
Tomer
Il a dit sans support 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
la source
Le PO a dit "sans javascript".
Etienne Miret
1

Une extension pour ceux qui ont fait un peu de bidouillage comme moi.

Le travail suivant (à partir de W3):

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

Il est important de noter que cela ne fonctionne pas en CSS. Ie vous ne pouvez pas utiliser:

.first-input {
    autofocus:"autofocus"
}

Au moins ça n'a pas marché pour moi ...

AER
la source
-5

Parfois, tout ce que vous avez à faire pour vous assurer que le curseur est à l'intérieur de la zone de texte est: cliquez sur la zone de texte et lorsqu'un menu est affiché, cliquez sur "Format de la zone de texte" puis cliquez sur l'onglet "zone de texte" et enfin modifiez tout quatre marges (gauche, droite, supérieure et inférieure) en descendant jusqu'à ce que "0" apparaisse sur chaque marge.

Marisela Sainz
la source