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;
}
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();
    }
}
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));
    }
}
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();
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.

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

Záver

Komentáre

Pridať komentár