Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Fokus pada Elemen `` Menggunakan Fungsi `focus()` JavaScript?

Bagaimana untuk Fokus pada Elemen `` Menggunakan Fungsi `focus()` JavaScript?

Susan Sarandon
Lepaskan: 2024-11-05 13:04:02
asal
306 orang telah melayarinya

How to Focus on a `` Element Using JavaScript's `focus()` Function?

Keupayaan untuk Fokus pada
Menggunakan Fungsi fokus() JavaScript

Soalan Asal:

Adakah ia boleh difokuskan pada

elemen dengan menggunakan fungsi fokus() JavaScript?

Butiran Tambahan:

Saya menyasarkan

elemen menggunakan fokus():

<code class="html"><div id="tries">You have 3 tries left</div></code>
Salin selepas log masuk

Walau bagaimanapun, menggunakan document.getElementById('tries').focus(); gagal melaksanakan tugasan ini. Bolehkah sesiapa memberikan panduan untuk menyelesaikan isu ini?

Jawapan:

Dengan memberikan atribut tabindex, anda boleh mencapai fokus yang diingini pada

tag.

Pelaksanaan:

<code class="html"><div tabindex="0">Hello World</div></code>
Salin selepas log masuk

Menetapkan indeks tab kepada 0 menyepadukan teg ke dalam susunan tab sedia ada halaman, dengan 0 mewakili elemen pertama dalam jujukan. Nilai yang lebih tinggi menunjukkan susunan keutamaan, di mana 1 diutamakan daripada 2 dan seterusnya.

Sebagai alternatif, anda boleh menetapkan indeks tab -1 untuk mengehadkan keupayaan fokus kepada skrip, menjadikan elemen itu tidak boleh diakses oleh interaksi pengguna.

Contoh:

<code class="javascript">document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};</code>
Salin selepas log masuk
<code class="css">div:focus {
    background-color: Aqua;
}</code>
Salin selepas log masuk
<code class="html"><div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div></code>
Salin selepas log masuk

Dengan menggabungkan teknik ini, anda boleh memanipulasi fokus

yang anda inginkan dengan cekap; elemen, membolehkan kawalan lancar ke atas interaksi dan kebolehcapaian pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Fokus pada Elemen `` Menggunakan Fungsi `focus()` JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan