Fokus bentuk html default tanpa JavaScript

159

Apakah mungkin untuk menetapkan fokus input default pada formulir HTML tanpa menggunakan JavaScript, misalnya:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Saya ingin mengatur fokus default ke salah satu dari kotak teks ketika formulir memuat tanpa menggunakan JavaScript (seperti yang saya inginkan perilaku terjadi ketika pengguna telah js dinonaktifkan).

html accessibility Adam Jenkin
sumber

Jawaban:

293

Anda dapat melakukannya dalam HTML5, tetapi jika tidak, Anda harus menggunakan JavaScript.

HTML5 memungkinkan Anda menambahkan autofocuske elemen formulir Anda, misalnya:

<input type="text" name="myInput" autofocus />

Ini berfungsi di browser yang mendukung HTML5 (Atau lebih tepatnya, browser yang mendukung bagian tertentu dari HTML5) tetapi seperti yang Anda tahu, belum semua orang dapat menggunakannya.

Jake Lucas
sumber
22

Sesuatu yang perlu diperhatikan ... jika Anda menetapkan elemen bentuk fokus, maka siapa pun yang menggunakan Teknologi Terpandu (AT) seperti pembaca layar harus membuat cadangan untuk melihat menu dan konten lain yang ada sebelum bidang fokus.

Metode yang saya sukai, menurut saya, adalah tidak mengatur fokus ke bidang apa pun, kecuali tautan lewati jika tersedia. Itu memberi mereka pilihan untuk melompat ke konten halaman atau membaca halaman dari atas ke bawah.

Greg
sumber
Menambahkan tautan loncatan yang juga disembunyikan secara visual, tetapi dapat diakses melalui pembaca layar akan sangat bagus!
James Cazzetta
Saya harus belajar banyak tentang aksesibilitas. Terima kasih telah menambahkan jawaban ini untuk membantu kita semua belajar!
Andrew Steitz
3

Seperti yang orang lain katakan, tanpa Javascript Anda tidak dapat menjamin bidang default. Opsi alternatif yang mungkin ingin Anda coba, jika Anda memiliki beberapa bidang yang mungkin ingin diakses pengguna menggunakanaccesskey atribut. Ini pada dasarnya berarti pengguna dapat kembali ke salah satu bidang secara instan nanti saat menjelajah, yang mungkin berguna bagi pengguna pembaca layar, dll ...

Artikel Wikipedias tentang hal ini cukup berguna - http://en.wikipedia.org/wiki/Access_key


sumber
0

Ini tidak mungkin tanpa beberapa bentuk skrip. Bahkan halaman muka Google memerlukan Javascript untuk memfokuskan bidang pencarian.

Evan Mulawski
sumber
1
Ini. Google hanya menambahkan javascript untuk browser yang tidak mendukung HTML5. Sesuatu yang layak dipertimbangkan dalam aplikasi apa pun.
mvbrakel
-8

Anda mungkin dapat menggunakan atribut tabindex dan menggunakan nilai terendah pada kotak teks default. Periksa di sini untuk dukungan browser:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

Situs menyarankan itu

(dalam hampir semua kasus lainnya — yaitu kontrol formulir dan tautan — tabindex memiliki dukungan yang sangat baik)

Cahit
sumber
3
Atribut "tabindex" tidak memberikan fokus otomatis ke elemen apa pun, bahkan elemen dengan "tabindex = 1". Menekan <tab> (atau klik) diperlukan untuk memberikan fokus pada elemen pertama dalam urutan tab.
Clint Pachl