Bolehkah saya Menggunakan Fungsi `focus()` JavaScript pada Elemen ``?-tutorial js-php.cn

Can I Use JavaScript's `focus()` Function on a `` Element?

Memfokuskan pada
Elemen Menggunakan JavaScript

Soalan:

Adakah ia boleh dilaksanakan untuk menumpukan pada

elemen dengan fungsi fokus() JavaScript?

Latar Belakang:

elemen sedang digunakan:

<code class="html"><div id="tries">You have 3 tries left</div></code>

Salin selepas log masuk

Dan percubaan dibuat untuk memfokuskan pada

dengan kod:

<code class="javascript">document.getElementById('tries').focus();</code>

Salin selepas log masuk

Walau bagaimanapun, tumpuan tidak digunakan.

Jawapan:

Ya, adalah mungkin untuk fokus pada a

elemen menggunakan fungsi fokus(). Langkah utama ialah menetapkan atribut tabindex kepada

<code class="html"><div tabindex="0">You have 3 tries left</div></code>

Salin selepas log masuk

Indeks tab 0 meletakkan teg dalam susunan tab semula jadi halaman. Nombor yang lebih tinggi menetapkan urutan keutamaan tertentu, dengan 1 sebagai yang pertama, 2 sebagai yang kedua, dan seterusnya.

Selain itu, indeks tab -1 menjadikan

hanya boleh difokuskan melalui skrip, bukan oleh tindakan pengguna.

Berikut ialah contoh kod yang menggambarkan ini:

<code class="javascript">document.getElementById('tries').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

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

Artikel sebelumnya：Bagaimanakah saya boleh mengulangi tatasusunan besar secara tidak segerak dalam JavaScript untuk mengekalkan responsif UI? Artikel seterusnya：Mengapa Gelung Sementara Menyekat Gelung Peristiwa dalam Node.js?

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