Come posizionare il cursore (messa a fuoco automatica) nella casella di testo quando una pagina viene caricata senza il supporto di javascript?

89

Ho un modulo con alcuni campi di testo e voglio posizionare il cursore (messa a fuoco automatica) sul primo campo di testo del modulo quando la pagina viene caricata.

Voglio farlo senza usare javascript.

css html

— Thavamani Kasi
fonte

1

<input.... tabindex="1" />

— Abhitalks

146

È possibile fare a meno del supporto di javascript ..
Possiamo usare l'attributo di messa a fuoco automatica html5
Ad esempio:

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

Se lo usi (autofocus = "autofocus") nel campo di testo significa che il campo di testo viene messo a fuoco quando la pagina viene caricata .. Per maggiori dettagli:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

— Thavamani
fonte

6

Le lettere maiuscole appropriate sono in realtà autoFocus per JSX / React.

— thadk

37

Basta aggiungere il autofocusprimo input o la textarea.

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

— Rajnikant Kakadiya
fonte

1

Almeno in Chrome, autofocusnon funziona, ma autofocus="autofocus"funziona.

— Jay Sullivan

4

Questo funzionerà:

OnLoad="document.myform.mytextfield.focus();"

— Vishal
fonte

3

@putvande - il titolo dice "usando javascript" quindi dagli una pausa.

— Tomer

Ha detto senza supporto 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

L'OP ha detto "senza javascript".

— Etienne Miret

1

Un'espansione per coloro che hanno giocato un po 'come ho fatto io.

Il seguente lavoro (da W3):

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

È importante notare che questo non funziona però con i CSS. Cioè non puoi usare:

.first-input {
    autofocus:"autofocus"
}

Almeno non ha funzionato per me ...

— AER
fonte

-5

A volte tutto ciò che devi fare per assicurarti che il cursore si trovi all'interno della casella di testo è: fare clic sulla casella di testo e quando viene visualizzato un menu, fare clic su "Formato casella di testo" quindi fare clic sulla scheda "casella di testo" e infine modificare tutto quattro margini (sinistro, destro, superiore e inferiore) con la freccia verso il basso finché "0" non appare su ciascun margine.

— Marisela Sainz
fonte