shredder01
Mitglied
Hallo,
ich gebe zu der Titel klingt etwas seltsam, aber genauso sieht das Problem für mich im Moment aus.
Ich habe eine Lytebox mit der ich herumexperimentiere und bei der möchte ich folgendes erreichen: Wenn man Tastaturnutzer ist und mit der TAB-Taste von einem Element zum nächsten weiterhüpft, dann würde man irgendwann aus dem Popup der Lytebox heraushüpfen. Das möchte ich verhindern indem ich beim Verlassen des letzten Elementes des Popups (onblur) den Fokus per Javascript wieder auf das erste Element des Popups lege.
Zur besseren Veranschaulichung vielleicht mal folgendes Bild: http://www.advanced-simple.de/ablauf-tab-lytebox.png
Dazu habe ich jetzt folgendes ins Lytebox-Script integriert:
Zur Kontrolle, um zu sehen wer gerade den Fokus hat, habe ich außerdem folgendes eingebaut:
Wenn ich jetzt aber mit der TAB-Taste durch das Lytebox-Popup hüpfe und das letzte Element (lbClose) verlasse, passiert etwas merkwürdiges.
1. Die Konsole von Firebug gibt mir aus
2. lbHoverNav hat eine dicke rote Umrandung (allerdings nur im FF und im IE, in Chrome und Safari nicht) - die ich :focus per CSS zugewiesen habe ... Gut!
aber
3. lbHoverNav hat gar nicht den Fokus. Stattdessen habe ich trotz 1. und 2. das Popup verlassen und der Fokus liegt jetzt auf Bedienelementen des Browsers. ... gar nicht gut
Der Link zur Testseite: http://www.advanced-simple.de/lightboxtest/
Kann mir jemand erklären was da falsch läuft?
ich gebe zu der Titel klingt etwas seltsam, aber genauso sieht das Problem für mich im Moment aus.
Ich habe eine Lytebox mit der ich herumexperimentiere und bei der möchte ich folgendes erreichen: Wenn man Tastaturnutzer ist und mit der TAB-Taste von einem Element zum nächsten weiterhüpft, dann würde man irgendwann aus dem Popup der Lytebox heraushüpfen. Das möchte ich verhindern indem ich beim Verlassen des letzten Elementes des Popups (onblur) den Fokus per Javascript wieder auf das erste Element des Popups lege.
Zur besseren Veranschaulichung vielleicht mal folgendes Bild: http://www.advanced-simple.de/ablauf-tab-lytebox.png
Dazu habe ich jetzt folgendes ins Lytebox-Script integriert:
Code:
this.doc.getElementById('lbClose').onblur = function() {document.getElementById('lbHoverNav').focus();};
Code:
document.addEventListener("focus", function (e) {
console.log("Es ist ein focus-Event bei diesem Element passiert: " + e.target.id);
}, true);
1. Die Konsole von Firebug gibt mir aus
... Gut!Es ist ein focus-Event bei diesem Element passiert: lbHoverNav
2. lbHoverNav hat eine dicke rote Umrandung (allerdings nur im FF und im IE, in Chrome und Safari nicht) - die ich :focus per CSS zugewiesen habe ... Gut!
aber
3. lbHoverNav hat gar nicht den Fokus. Stattdessen habe ich trotz 1. und 2. das Popup verlassen und der Fokus liegt jetzt auf Bedienelementen des Browsers. ... gar nicht gut
Der Link zur Testseite: http://www.advanced-simple.de/lightboxtest/
Kann mir jemand erklären was da falsch läuft?