Wie platziere ich den Cursor (Autofokus) im Textfeld, wenn eine Seite ohne Javascript-Unterstützung geladen wird?

88

Ich habe ein Formular mit einigen Textfeldern und möchte den Cursor (Autofokus) auf das erste Textfeld des Formulars setzen, wenn die Seite geladen wird.

Ich möchte es ohne Javascript tun.

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

Antworten:

146

Es ist möglich, auf die Unterstützung von Javascript zu verzichten.
Wir können das HTML5- Autofokusattribut verwenden.
Beispiel: 

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

Wenn Sie es (Autofokus = "Autofokus") im Textfeld verwenden, wird das Textfeld beim Laden der Seite fokussiert. Weitere Informationen:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Thavamani
quelle
5
Die entsprechende Großschreibung ist AutoFocus für JSX / React.
Thadk
37

autofocusFügen Sie einfach die erste Eingabe oder den ersten Textbereich hinzu.

<input type="text" name="name" id="xax" autofocus="autofocus" />
Rajnikant Kakadiya
quelle
1
Zumindest in Chrome autofocusfunktioniert das nicht, autofocus="autofocus"tut es aber .
Jay Sullivan
4

Das wird funktionieren:

OnLoad="document.myform.mytextfield.focus();"
Vishal
quelle
3
@putvande - der Titel sagt "mit Javascript", also gib ihm eine Pause.
Tomer
Er sagte ohne JavaScript-Unterstützung.
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
quelle
Das OP sagte "ohne Javascript".
Etienne Miret
1

Eine Erweiterung für diejenigen, die ein bisschen herumgespielt haben wie ich.

Die folgende Arbeit (aus W3):

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

Es ist wichtig zu beachten, dass dies in CSS jedoch nicht funktioniert. Dh du kannst nicht benutzen:

.first-input {
    autofocus:"autofocus"
}

Zumindest hat es bei mir nicht funktioniert ...

VRE
quelle
-5

Manchmal müssen Sie nur sicherstellen, dass sich der Cursor im Textfeld befindet: Klicken Sie auf das Textfeld. Wenn ein Menü angezeigt wird, klicken Sie auf "Textfeld formatieren", dann auf die Registerkarte "Textfeld" und ändern Sie schließlich alle vier Ränder (links, rechts, oben und unten) durch Pfeil nach unten, bis an jedem Rand "0" angezeigt wird.

Marisela Sainz
quelle