Bagaimana cara menempatkan kursor (fokus otomatis) di kotak teks saat halaman dimuat tanpa dukungan javascript?

89

Saya memiliki formulir dengan beberapa bidang teks, dan saya ingin menempatkan kursor (fokus otomatis) pada bidang teks pertama formulir saat halaman dimuat.

Saya ingin melakukannya tanpa menggunakan javascript.

css html

— Thavamani Kasi
sumber

1

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

— Abhitalks

146

Ya itu mungkin dilakukan tanpa dukungan javascript ..
Kita dapat menggunakan atribut auto fokus html5
Sebagai Contoh:

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

Jika menggunakannya (autofocus = "autofocus") di bidang teks berarti bidang teks menjadi fokus saat halaman dimuat .. Untuk lebih jelasnya:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

— Thavamani
sumber

6

Kapitalisasi yang sesuai sebenarnya adalah fokus otomatis untuk JSX / React.

— thadk

37

Cukup tambahkan autofocusinput pertama atau textarea.

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

— Rajnikant Kakadiya
sumber

1

Setidaknya di Chrome, autofocustidak berfungsi, tetapi berfungsi autofocus="autofocus".

— Jay Sullivan

4

Ini akan berhasil:

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

— Vishal
sumber

3

@putvande - judulnya memang mengatakan "menggunakan javascript" jadi beri dia istirahat.

— Tomer

Dia berkata tanpa dukungan 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
sumber

OP mengatakan "tanpa javascript".

— Etienne Miret

1

Ekspansi bagi mereka yang melakukan sedikit mengutak-atik seperti saya.

Karya berikut (dari W3):

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

Penting untuk dicatat bahwa ini tidak berfungsi di CSS. Yaitu Anda tidak dapat menggunakan:

.first-input {
    autofocus:"autofocus"
}

Setidaknya itu tidak berhasil untuk saya ...

— AER
sumber

-5

Terkadang yang harus Anda lakukan untuk memastikan kursor berada di dalam kotak teks adalah: klik kotak teks dan saat menu ditampilkan, klik "Format kotak teks" lalu klik tab "kotak teks" dan terakhir ubah semua empat margin (kiri, kanan, atas dan bawah) dengan panah ke bawah sampai muncul "0" di setiap margin.

— Marisela Sainz
sumber