×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

Ako po zatvorení Bootstrap dialogu vrátiť focus na pôvodné miesto

V tomto článku predstavím riešenie, ktorým sa zabezpečí vrátenie focusu na element, z ktorého bol dialóg vyvolaný. V mojom prípade som mal problém, že ak som zobrazil Bootstrap dialog a zatvoril ho, focus nezostal na pôvodnom mieste alebo bol vrátený na začiatok dokumentu.
Moje riešenie je založené na registrovaní poslucháčov udalostí pre dialóg a jeho eventy hidden a shown. Pre ukladanie focusu používam vlastnosť lastFocusedElement.
Príklad: Vytvorenie vlastnosti lastFocusedElement.
1
2
3
4
var app = {
this.lastFocusedElement = null;
}
Teraz vytvoríme metódy na uloženie a nastavenie focusu.
Príklad: Pridanie metód na uloženie a nastavenie focusu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var app = {
this.lastFocusedElement = null;
/**
* Saves current focused node
*
* @returns {undefined}
*/
saveFocus: function () {
this.lastFocusedElement = document.activeElement;
},
/**
* Sets focus to DOMNode
*
* @returns {undefined}
*/
setFocus: function () {
this.lastFocusedElement.focus();
}
}
A na záver pridáme poslucháčov udalostí na zobrazenie a skrytie dialógu.
Príklad: Celé riešenie focusu pre Bootstrap dialog
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var app = {
this.lastFocusedElement = null;
/**
* Saves current focused node
*
* @returns {undefined}
*/
saveFocus: function () {
this.lastFocusedElement = document.activeElement;
},
/**
* Sets focus to DOMNode
*
* @returns {undefined}
*/
setFocus: function () {
this.lastFocusedElement.focus();
},
/**
* Registering event listeners
*
* @returns {undefined}
*/
initEvents: function () {
$(dialogid).on('hidden.bs.modal', $.proxy(this.setFocus, this));
$(dialogid).on('show.bs.modal', $.proxy(this.saveFocus, this));
}
}
Príklad: Spustenie programového kódu.
1
app.initEvents();

Záver

Verím, že vám tento článok pomohol. Ak používate iné riešenie, podeľte sa oň prostredníctvom komentára.
Bootstrap,event,button,show,shown,document,activeElement
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších