Získejte Focused Element pomocí JavaScriptu

Zajištění toho, aby byly webové stránky nebo webová aplikace přístupné, použitelné a také funkční, je pro všechny uživatele prvořadé. Uživatelé neocení, když jsme odvedli dobrou práci, ale rozhodně vědí, kdy jsme odvedli špatnou práci. Jednou z důležitých součástí použitelnosti a přístupnosti aplikací je správa zaměření, což je úkol, který vývojáři často přehlížejí.

Ukázkový příklad špatné správy fokusu: otevření modu po kliknutí na spouštěcí odkaz, nezaměření na jakýkoli prvek v modalu. Ještě horší: zaměření na jeden z modálních prvků, ale nevracení fokusu na jeho spouštěcí prvek, jakmile je zavřen. V ideálním případě byste uložili odkaz na spoušť, zaostřili na modal a zaměřili se zpět na spouštěcí prvek, když je modal zavřený.

A co časy, kdy si nejste vědomi toho, který prvek je zaměřen? Dokument nám pomocí document.activeElement říká, který prvek je zaměřen majetek!

JavaScript

Načtení aktuálně vybraného prvku je stejně snadné jako použití document.activeElement :

var focusedElement = document.activeElement;

/* per my example:
	var triggerElement = document.activeElement;
	myModal = new MyModal({
		onOpen: function() {
			this.container.focus();
		},
		onClose: function() {
			triggerElement.focus();
		}
	});
*/

Tato vlastnost není vyhrazena pouze pro tradičně zaměřené prvky, jako jsou pole formuláře a odkazy, ale také jakýkoli prvek s kladnou sadou tabIndex.

Co miluji na document.activeElement spočívá v tom, že nepotřebujete žádný typ posluchače událostí nebo delegovaného posluchače, abyste mohli sledovat, na jaký prvek je zaměřen – můžete se na tuto vlastnost kdykoli jednoduše odkazovat. Samozřejmě byste měli udělat spoustu testů, než se spolehnete na funkci jako je tato – zdá se, že je zralá na problémy s různými prohlížeči nebo závodní podmínky. Celkově vzato jsem však byl spokojen s jeho používáním a jeho spolehlivostí!