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

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>

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>

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>

<code class="css">div:focus {
    background-color: Aqua;
}</code>

<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>

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!