JavaScript Focus Trap: Selesaikan masalah lompatan segera dalam kitaran kunci tab

Apabila melaksanakan fungsi perangkap fokus pada halaman web, masalah biasa ditemui: Apabila pengguna menavigasi ke elemen yang fokus terakhir menggunakan kekunci Tab, tumpuan akan segera melompat ke elemen pertama dan bukannya gelung selepas meninggalkan elemen terakhir. Artikel ini akan menganalisis fenomena ini secara mendalam dan menunjukkan bahawa punca akarnya adalah konflik masa antara acara `Keyup` dan tingkah laku lalai penyemak imbas. Dengan beralih ke acara `keydown` dan menggunakan` E.PreventDefault () `dengan betul, kita dapat mengawal aliran fokus dengan tepat dan mencapai kitaran fokus yang lancar dan dijangka, dengan itu meningkatkan kebolehcapaian aplikasi web.

Memahami perangkap fokus dan kepentingannya

Perangkap Fokus, juga dikenali sebagai Pengurusan Fokus Modal, merupakan teknologi pembangunan front-end penting, terutamanya digunakan untuk meningkatkan kebolehcapaian aplikasi web. Apabila pengguna membuka kotak dialog modal, menu pop timbul, atau mana-mana komponen UI yang memerlukan kepekatan pengguna untuk beroperasi, perangkap fokus memastikan fokus papan kekunci terhad kepada komponen. Ini bermakna pengguna tidak boleh memindahkan fokus kepada unsur -unsur di luar komponen melalui kekunci Tab Kunci atau Shift Tab, dengan itu mengelakkan kehilangan fokus dan pengalaman pengguna yang mengelirukan. Ini penting bagi pengguna yang bergantung pada navigasi papan kekunci, terutama yang menggunakan pembaca skrin.

Analisis Masalah: Konflik antara acara Keyup dan Loop Fokus

Apabila melaksanakan perangkap fokus, keperluan umum ialah selepas tumpuan mencapai elemen yang fokus terakhir dalam komponen, apabila kekunci Tab ditekan lagi, tumpuan dapat kembali ke elemen fokus pertama; Sebaliknya, apabila kekunci Tab Shift ditekan pada elemen pertama, tumpuan boleh berkisar ke elemen terakhir.

Walau bagaimanapun, masalah biasa ialah apabila menggunakan acara Keyup untuk mendengar kunci tab dan cuba untuk memberi tumpuan dari elemen terakhir ke yang pertama, pengguna akan mendapati bahawa tumpuan segera melompat kembali ke elemen pertama ketika ia "tanah" pada elemen terakhir, bukannya gelung yang berlaku ketika pengguna "meninggalkan elemen terakhir.

Mari kita lihat pelaksanaan yang rosak:

 const element = document.getElementById ("promptSdialog");
const focusleElements = element.QuerySelectorAll ("span: not ([disabled])");

const FirstFocusableElement = FocusableElements [0];
const lastFocusableElement = focusableElements [focusableelements.length - 1];

element.addeventListener ("keyup", fungsi (e) {
  jika (e.key === "tab") {
    // apabila fokus adalah pada elemen terakhir jika (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus ();
      E.PreventDefault (); // cuba mengelakkan tingkah laku lalai, tetapi sudah terlambat}
  }
});

Mengapa masalah ini berlaku?

Akar masalah terletak pada tingkah laku lalai penyemak imbas dalam mengendalikan kunci tab dan pemicu masa peristiwa Keyup.

1. Tab Key Down (Keydown) : Apabila pengguna menekan kekunci Tab, penyemak imbas akan segera melakukan tingkah laku lalainya - gerakkan fokus ke elemen fokus yang akan datang.
2. Pemindahan Fokus : Pada masa ini, jika tumpuan semasa adalah pada elemen kedua hingga terakhir, selepas menekan kekunci Tab, tumpuan akan segera dipindahkan ke elemen terakhir.
3. Pelepasan Key Tab (Keyup) : Acara Keyup hanya akan dicetuskan apabila pengguna melepaskan kekunci Tab.
4. Pengendalian Acara : Pada masa ini, Document.ActiveElement sudah menunjuk kepada elemen terakhir. Pendengar acara kami mengesan ini dan melaksanakan firstFocusableElement.focus (), memaksa fokus kembali ke elemen pertama.

Oleh itu, fenomena yang diperhatikan oleh pengguna adalah: Sebaik sahaja kekunci TAB ditekan, tumpuan telah mencapai elemen terakhir, dan kemudian sebaik sahaja kunci TAB dikeluarkan, tumpuan dipaksa kembali ke elemen pertama. Ini mengakibatkan persepsi bahawa fokus "melompat kembali dengan segera", yang tidak konsisten dengan tingkah laku yang dikehendaki "tidak beroperasi sehingga meninggalkan elemen terakhir".

Penyelesaian: Ambil kesempatan daripada acara Keydown

Kunci untuk menyelesaikan masalah ini adalah untuk mengubah masa mendengar acara. Kita perlu melangkah masuk dan mengawal fokus sebelum penyemak imbas melakukan tingkah laku peralihan fokus lalai dari kunci tab. Acara Keydown memberikan peluang ini dengan tepat.

Apabila menggunakan acara Keydown, kami dapat melaksanakan logik kami apabila kekunci Tab ditekan tetapi penyemak imbas belum memproses tingkah laku pemindahan fokus lalai. Digabungkan dengan E.PreventDefault () kita dapat menghalang tingkah laku lalai penyemak imbas dan menguruskan fokus secara manual.

Berikut adalah pelaksanaan kod yang diperbetulkan:

 const element = document.getElementById ("promptSdialog");
// pastikan untuk mendapatkan semua elemen yang fokus, termasuk unsur-unsur yang tidak fokus di asli dengan TabIndex const focusableElements = element.QuerySelectorAll ("span [tabindex]: tidak ([dilumpuhkan]), butang: tidak (kurang upaya]), input: tidak ([dilumpuhkan]) a [href]: tidak ([dilumpuhkan]) ");

const FirstFocusableElement = FocusableElements [0];
const lastFocusableElement = focusableElements [focusableelements.length - 1];

element.addeventListener ("keydown", fungsi (e) {
  jika (e.key === "tab") {
    // Loop Tab Forward: Apabila tumpuan adalah pada elemen terakhir, kekunci tab menggerakkan fokus kepada yang pertama jika (! E.ShiftKey && document.activeElement === LastFocusableElement) {
      firstFocusableElement.focus ();
      E.PreventDefault (); // Mencegah pemindahan fokus lalai penyemak imbas}
    // Loop Tab Reverse: Apabila tumpuan adalah pada elemen pertama, kekunci Tab Shift menggerakkan fokus kepada yang terakhir jika (e.shiftKey && document.activeelement === firstFocusableElement) {
      lastFocusableLement.focus ();
      E.PreventDefault (); // Mencegah pemindahan fokus lalai penyemak imbas}
  }
});

Dalam versi yang disemak ini:

1. Apabila pengguna menekan kekunci Tab, peristiwa Keydown api segera.
2. Jika document.activeElement adalah lastfocusableelement dan kekunci shift tidak ditekan (bermakna tab hadapan), kami secara manual menetapkan fokus kepada FirstFocusableLement.
3. Paling penting, kami memanggil E.PreventDefault (). Ini menghalang penyemak imbas daripada melakukan tingkah laku pemindahan fokus lalai selepas peristiwa keydown. Oleh itu, tumpuan melompat dari elemen terakhir ke elemen pertama tepat mengikut logik kami, tanpa sebarang "melompat" pertengahan.
4. Untuk membuat perkara yang lebih baik, kami juga telah menambah sokongan untuk Shift Tab Reverse Looping, di mana apabila fokus berada pada elemen pertama, tab Shift menekan akan bergerak ke elemen terakhir.

Contoh struktur HTML

Agar kod JavaScript di atas berfungsi dengan betul, struktur HTML kami perlu mengandungi unsur -unsur yang fokus, dan mereka harus berada di dalam bekas induk bagi kami untuk mendengar peristiwa. Contohnya:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<div id="promptsdialog" style="paparan: blok; sempadan: 1px pepejal #ccc; padding: 20px; width: 300px; margin: 50px auto;">
  <div class="prompt-title-bar">
    <h4 style="margin-top: -4px;"> opsyen prompt </h4>
    <div id="promptscommand">
      <div style="paparan: flex; justify-content: ruang-sekitar; margin-top: 15px;">
        <span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="save" class="command-icon" id="btnsavewindow"> <i class="fa fa-save"> </i> </span>
        <span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="mengalih keluar item" class="command-icon" id="btnremoveFromitemsGrid"> <i class="fa fa-trash"> </i>
        <span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="close" class="command-icon" id="btnclosepromptdialog"> <i class="fa fa-remove"> </i> </span>
      </span>
</div>
    </div>
  </div>
</div>

<yaya>
  .command-icon {
    kursor: penunjuk;
    Padding: 8px;
    Sempadan: 1px pepejal telus;
    Radius sempadan: 4px;
    Peralihan: Semua 0.2s mudah-dalam-keluar;
  }
  .Command-icon: fokus {
    Garis Besar: 2PX Solid #007BFF;
    Border-color: #007BFF;
  }
</yaya>

Dalam struktur HTML ini, elemen menjadi tumpuan melalui atribut TabIndex, yang penting untuk kawalan tersuai untuk mencapai pengurusan fokus.

Perkara yang perlu diperhatikan dan amalan terbaik

1. Mengenal pasti elemen yang fokus : Pemilih QuerySelectorAll mestilah sebagai komprehensif yang mungkin, yang meliputi semua elemen yang mungkin menerima fokus, seperti [href], butang, input, pilih, teks, dan mana -mana elemen dengan atribut TabIndex.
2. Pengendalian Kandungan Dinamik : Jika kandungan dalam perangkap fokus dimuatkan secara dinamik atau dikeluarkan, anda perlu memastikan bahawa pelbagai fokus boleh dikemas kini dalam masa selepas perubahan kandungan.
3. Peranan Wai-Aria : Bagi komponen kompleks seperti kotak dialog modal, disyorkan untuk menggabungkan WAI-ARIA (Inisiatif Kebolehaksesan Web-Aplikasi Internet yang boleh diakses) dan sifat-sifat, seperti peranan = "dialog", Aria-Modal = "Benar", dan sebagainya, untuk menyediakan maklumat semantik yang lebih kaya kepada teknologi bantuan.
4. Pembersihan pendengar acara : Apabila kotak modal atau lapisan pop timbul ditutup, pendengar acara yang sepadan harus dikeluarkan untuk mengelakkan kebocoran ingatan dan overhead prestasi yang tidak perlu.
5. Keserasian silang pelayar : E.KEY disokong secara meluas dalam pelayar moden, tetapi jika anda perlu menyokong pelayar yang lebih tua, anda mungkin ingin mempertimbangkan E.Keycode atau E.Which.

Meringkaskan

Pelaksanaan perangkap fokus yang betul adalah penting untuk meningkatkan kebolehcapaian aplikasi web. Dengan memahami perbezaan masa antara keydown dan peristiwa utama dalam pengurusan tumpuan penyemak imbas, kita dapat mengelakkan masalah gelung fokus yang sama. Menukar acara mendengar dari Keyup ke Keydown, digabungkan dengan E.PreventDefault (), memastikan kawalan tepat tingkah laku gelung fokus dan menyediakan pengalaman navigasi papan kekunci yang lancar dan boleh diramal untuk semua pengguna.

Atas ialah kandungan terperinci JavaScript Focus Trap: Selesaikan masalah lompatan segera dalam kitaran kunci tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!