×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest