Jak umieścić kursor (autofokus) w polu tekstowym, gdy strona zostanie załadowana bez obsługi JavaScript?

89

Mam formularz z kilkoma polami tekstowymi i chcę umieścić kursor (autofokus) w pierwszym polu tekstowym formularza po załadowaniu strony.

Chcę to zrobić bez używania javascript.

Thavamani Kasi
źródło
1
<input.... tabindex="1" />
Abhitalks

Odpowiedzi:

146

Można to zrobić bez obsługi javascript ..
Możemy użyć atrybutu autofokus html5
Na przykład:

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

Jeśli go użyjesz (autofocus = "autofocus") w polu tekstowym oznacza, że ​​pole tekstowe zostanie uaktywnione po załadowaniu strony. Więcej informacji:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Thavamani
źródło
6
Właściwa wielkość liter to w rzeczywistości autoFocus dla JSX / React.
thadk
37

Po prostu dodaj autofocuspierwsze wejście lub obszar tekstowy.

<input type="text" name="name" id="xax" autofocus="autofocus" />
Rajnikant Kakadiya
źródło
1
Przynajmniej w Chrome autofocusnie działa, ale autofocus="autofocus"działa.
Jay Sullivan
4

To zadziała:

OnLoad="document.myform.mytextfield.focus();"
Vishal
źródło
3
@putvande - w tytule jest napisane „używając javascript”, więc daj mu spokój.
Tomer,
Powiedział bez obsługi 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
źródło
OP powiedział „bez javascript”.
Etienne Miret
1

Dodatek dla tych, którzy trochę majstrowali tak jak ja.

Następująca praca (z W3):

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

Należy jednak pamiętać, że to nie działa w CSS. Nie możesz użyć:

.first-input {
    autofocus:"autofocus"
}

Przynajmniej mi to nie wyszło ...

AER
źródło
-5

Czasami wszystko, co musisz zrobić, aby upewnić się, że kursor znajduje się w polu tekstowym, to: kliknąć pole tekstowe i po wyświetleniu menu kliknąć „Formatuj pole tekstowe”, a następnie kliknąć kartę „pole tekstowe” i na koniec zmodyfikować wszystko cztery marginesy (lewy, prawy, górny i dolny), przeciągając w dół, aż na każdym marginesie pojawi się „0”.

Marisela Sainz
źródło