Bagaimana untuk Fokus pada Elemen `` Menggunakan Fungsi `focus()` JavaScript?-tutorial js-php.cn

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!

Artikel sebelumnya：Cara Mendapatkan Ketinggian Div dalam JavaScript Tulen: clientHeight vs. offsetHeight Artikel seterusnya：Cara Membuat PDF dalam React daripada Data JSON dengan jsPDF

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2837

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2961

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2484

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...