Untuk pengalaman pengguna yang baik, aksesibilitas dan ketersediaan aplikasi Situs Web/Web, serta fungsinya sangat penting.
Ketika situs web kami berjalan dengan baik/pengalaman itu baik, pengguna tidak menyadarinya, tetapi mereka pasti akan merasakannya ketika kami tidak melakukannya dengan baik. Bagian penting dari ketersediaan dan aksesibilitas aplikasi adalah pemrosesan fokus input, tetapi ini adalah titik lain yang sering diabaikan pengembang.
Contoh penanganan fokus input yang buruk: Buka jendela setelah mengklik tautan, tetapi tidak memfokuskan kursor ke elemen apa pun di jendela. Lebih buruk lagi: fokus pada elemen di jendela modal, tetapi fokus tidak kembali setelah penutupan. Idealnya, referensi disimpan ketika tautan dipicu, dan kursor difokuskan pada jendela baru dan menggerakkan kursor kembali ketika jendela ditutup.
Tetapi bagaimana jika Anda tidak tahu elemen mana kursor input sekarang?
JavaScript
Mudah untuk menggunakan Document.ActiveElement untuk menemukan elemen yang saat ini dipilih:
Salinan kode adalah sebagai berikut:
var focusedElement = document.activeElement;
/* Misalnya, contoh:
var triggerElement = document.activeElement;
myModal = myModal baru ({
onopen: function () {
this.container.focus ();
},
Onclose: function () {
triggerElement.focus ();
}
});
*/
Properti ini tidak hanya tersedia pada elemen input reguler, tetapi juga termasuk bidang formulir atau tag tag <a>, tetapi elemen apa pun dengan set atribut TabIndex tersedia.
Alasan saya suka Document.ActiveElement adalah karena Anda tidak perlu menggunakan acara mendengarkan atau mendelegasikan pendengar untuk melacak elemen dan mendapatkan fokus - Anda bisa mendapatkan properti ini kapan saja. Tentu saja, sebelum menggunakan fitur -fitur seperti itu, Anda harus melakukan banyak tes - apakah ada bug dalam kondisi lintas -browser atau balapan. Secara keseluruhan, saya sangat puas dengan itu dan merasa sangat dapat diandalkan!