Komentar: Fungsi HTML sederhana sekarang memungkinkan kami untuk secara otomatis menemukan fokus input ke elemen yang diperlukan setelah halaman dimuat. Ini diselesaikan melalui atribut yang disebut autofocus. Teman yang tertarik dapat mempelajarinya.
Teks Asli: HTML5 Autofocus Attribut
Tanggal rilis asli: 27 Agustus 2012
Waktu Penerjemahan: 6 Agustus 2013
HTML5 telah meluncurkan banyak hal hebat bagi kami.
Di masa lalu, tugas yang ingin kami selesaikan dengan JavaScript dan flash, seperti verifikasi formulir, prompt box blank input (input placeholder), unggahan file klien dan unduh (penamaan file sisi klien), dan pemutaran audio/video, sekarang dapat diselesaikan dengan HTML dasar. Fitur HTML sederhana lainnya adalah sekarang memungkinkan kami untuk secara otomatis menemukan fokus input ke elemen yang diperlukan setelah halaman dimuat, dan menyelesaikannya melalui properti yang disebut autofocus.
Kode ini sesederhana berikut ini:
<!- Ini semua berhasil! ->
<input autofocus = "autofocus" />
<tombol autofocus = "autofocus"> hai! </button>
<textarea autofocus = "autofocus"> </textarea>
Setelah properti autofocus diatur, input, textarea, dan elemen tombol akan dipilih secara otomatis setelah halaman dimuat (yaitu, mendapatkan fokus). Saya mencoba elemen lain (seperti tag H1), TabIndex = 0, tetapi properti fokus otomatis tidak berpengaruh pada elemen -elemen ini sama sekali.
Atribut ini berguna dalam tujuan utama mendapatkan halaman yang tujuan utamanya adalah mengumpulkan informasi, seperti homepage Google (99% kasus digunakan untuk pencarian) atau penyihir instalasi online (seperti penginstal WordPress). Dan yang paling penting adalah bahwa JavaScript tidak memerlukan partisipasi.
Kode halaman lengkap adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> HTML5 AutoFocus Atribut Testing </iteme>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "asli = http: //davidwalsh.name/autofocus">
</head>
<body>
<!- Pada prinsipnya, hanya satu dari tiga elemen berikut yang dapat ditetapkan. Jika beberapa elemen diatur, elemen terakhir harus mendapatkan fokus->
<!-
->
<div>
<input autofocus = "autofocus" />
<tombol autofocus = "autofocus"> hai! </button>
<textarea autofocus = "autofocus"> </textarea>
</div>
</body>
</html>