Noch so ein Internet Explorer 6 Fehler, der bisher ganz an mir vorbei gegangen ist. Die Situation ist denkbar einfach: Ein Formular mit Auswahl-Feldern (SELECT) und dazugehörigen LABEL Elementen. Klickt der User auf das LABEL-Element wird das entsprechende Formular-Feld fokussiert. Funktioniert in allen mir bekannten Browsern fehlerfrei, nur der IE6 spielt verrückt. Hier wird das Formularfeld nicht nur fokussiert, nein, es wird auch gleich selektiert und zwar die erste Option des Auswahlfeldes.
Habe ein wenig herumgestöbert und siehe da, Microsoft ist das Problem bekannt und bietet eine Lösung. Interessant, dass gerade bei einem HTML-Element, das Usability und Accessibility erhöhen soll, auf eine JavaScript Lösung zurück gegriffen wird. Nicht so richtig sinnvoll, aber besser als gar nichts – hier der Beispielcode:
//Set a temp expando to store the current selectedIndex
function SelectOnFocusIn() {
try {
var eSrc = window.event.srcElement;
if (eSrc) eSrc.tmpIndex = eSrc.selectedIndex;
} catch (e) {
HandleError(e, false);
}
}
//restore the selectedIndex
function SelectOnFocus() {
try {
var eSrc = window.event.srcElement;
if (eSrc) eSrc.selectedIndex = eSrc.tmpIndex;
} catch (e) {
HandleError(e, false);
}
}Und der dazugehörige HTML-Code:
<select name="test" id="test"
onfocusin="SelectOnFocusIn()" onfocus="SelectOnFocus()">
<option value="3">Alien Perm </option>
<option value="4">Alien Temp </option>
<option value="1" selected="selected">Native </option>
<option value="2">Naturalized </option>
<option value="N">Not Indic. </option>
</select>Eingebaut, getestet – und anscheinend hat der zuständige Entwickler noch nichts von multiple gehört, denn bei Auswahlfeldern mit Mehrfachauswahl greift der Code nicht. Es wird nur die erste selektierte Option übernommen, alle anderen Auswahlen gehen verloren – Bugfixing der besten Qualität. Welch hoher Maßstab hier angelegt wurde, sieht man schon an der Anweisung im catch Block der Funktionen, wo bitte ist die Funktion HandleError, oder gehört diese Funktion mittlerweile zu einem offiziellen JavaScript Standard? Nein – also weg damit, und dann auch gleich noch die fehlende Unterstützung von Mehrfachauswahlen implementiert:
function SelectOnFocusIn() {
try {
var eSrc = window.event.srcElement;
if(eSrc) {
eSrc.firstSelected = eSrc.selectedIndex;
var tmpIndex = [];
for (var s = 0, l = eSrc.options.length; s<l; s++) {
if (eSrc.options[s].selected == true) {
tmpIndex.push(s);
}
}
eSrc.tmpIndex = tmpIndex;
}
} catch (e) {}
}
function SelectOnFocus() {
try {
var eSrc = window.event.srcElement;
if (eSrc) {
/* muss gesetzt werden, anderenfalls wird die
die erste Option immer mit aktiviert! */
eSrc.selectedIndex = eSrc.firstSelected;
for(var i=0, l = eSrc.tmpIndex.length; i<l; i++ ) {
eSrc.options[eSrc.tmpIndex[i]].selected = true;
}
}
} catch (e) {}
}Mit diesen Korrekturen lässt sich der Fokus-Bug nun für alle Formen von SELECT-Feldern anwenden, und wenn dem schon so ist, dann würde eine allgemeine Regel für alle solche Felder doch deutlich weiter helfen, als in jedem einzelnen Feld zwei Event-Handler zu notieren. Das Ganze müsste dann nur noch zum frühst möglichen Zeitpunkt geladen werden, und idealerweise nur für den Internet Explorer 6. Meine finale Lösung sieht am Ende so aus:
(function () {
var d = document;
selectFix = function() {
var selFields = document.getElementsByTagName('select');
if(!selFields || selFields.length==0) {return;}
for(var i=0, l=selFields.length; i<l; i++) {
var elm = selFields[i];
elm.onfocusin = function() {
try {
var eSrc = window.event.srcElement;
eSrc.firstSelected = eSrc.selectedIndex;
var tmpIndex = [];
for (var s = 0, l = eSrc.options.length; s<l; s++) {
if (eSrc.options[s].selected == true) {
tmpIndex.push(s);
}
}
eSrc.tmpIndex = tmpIndex;
} catch (e) {}
};
elm.onfocus = function() {
try {
var eSrc = window.event.srcElement;
if (eSrc) {
eSrc.selectedIndex = eSrc.firstSelected;
for(var s=0, l = eSrc.tmpIndex.length; s<l; s++ ) {
eSrc.options[eSrc.tmpIndex[s]].selected = true;
}
}
} catch (e) {}
}
}
};
try { d.documentElement.doScroll('left'); selectFix(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();Fehlt nur noch die Anforderung, das Script nur für den IE 6 laufen zu lassen. Dafür gibt es verschiedene Möglichkeiten. Eine JavaScript basierte “Browserweiche” nutzen (muss aber nicht sein), das ganze Script in eine eigene Datei auslagern und innerhalb eines Conditional Comment einbinden, oder – für den Fall, dass der Code innerhalb einer größeren JavaScript Datei steht über die jscript Variante:
/*@cc_on @*/
/*@if (@_jscript_version == 5.6)
// dieser Bereich ist für jscript-Interpreter version 5.6 sichtbar
// (das entspricht dem Internet Explorer 6)
@*/
/*@end @*/Wie gesagt, es ist alles andere als ideal, die Funktionalität von LABEL mit JavaScript nachträglich zu implentieren, geht es bei diesem Element doch gerade um eine Erhöhung der “Verfügbarkeit” auch ohne Zusatztechnologien. Aber bei dieser Browserversion ist ohnehin schon alles verloren, sollte jemand eine bessere – eine scriptfreie Lösung haben, dann bitte!