Fokus mit focus() gesetzt - komisches Verhalten (im Fokus, aber nicht wirklich)

shredder01

Mitglied
Hallo,

ich gebe zu der Titel klingt etwas seltsam, aber genauso sieht das Problem für mich im Moment aus. :rolleyes:
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();};
Zur Kontrolle, um zu sehen wer gerade den Fokus hat, habe ich außerdem folgendes eingebaut:
Code:
	document.addEventListener("focus", function (e) {
		console.log("Es ist ein focus-Event bei diesem Element passiert: " + e.target.id);		
	}, true);
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
Es ist ein focus-Event bei diesem Element passiert: lbHoverNav
... Gut!
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?
 
Okeee ... ich glaube ich hab denn Grund für das Problem gefunden. Wie es aussieht liegt es daran, dass das Element dem ich die onblur-Aktion zuweise (lbClose) das letzte Element auf der Seite ist. Wenn ich danach noch etwas platziere (versuchsweise hab ich jetzt mal einen zusätzlichen Anchor eingefügt), dann funktioniert es wie gewünscht.

Ich kann mir zwar im Moment noch nicht erklären warum das so ist, aber sobald lbClose nicht mehr das letzte Element auf der Seite ist klappt es.

Falls jemand dafür eine Erklärung hat, dann immer her damit. :)
 
Zurück