IE8 bug: select option disabled trotzdem per Tastatur auswählbar

**scrypter** · 25-06-2011, 04:58

Tach zusammen,

ich programmiere gerade ein Berechnungstool. Bei der Eingabe/Auswahl der Daten prüfe ich u.a. Zahlenformate usw. Ich habe mehrere Auswahlfelder im Formular, die sich z.T. je nach gewählter Option gegenseitig bedingen bzw. ausschließen. Soweit so gut, bislang funzt alles wie angedacht.
Ich prüfe zwischendurch mit IE6 / IE8 (sonst nutze ich FF3 / FF4 / seamonkey 2) und wie immer ärgert einen der IE an bekannten Stellen, was man aber irgendwie früher oder (meist) später und umständlich in den Griff kriegt.
Nun kommt aber der Hammer:
einige options innerhalb von select sind disabled="disabled" oder sollen dynamisch geblockt werden. FF macht alles erwartungsgemäß, d.h. die Option wird ausgegraut und ist weder per Maus noch per Tastatur wählbar (was auch sonst - ist ja schließlich disabled).
Nur der Mistbrowser von Bill G. schießt mal wieder den Vogel ab.
Die Optionen sind ausgegraut, per Maus nicht wählbar, aber wenn man sich mit Tab und Anfangsbuchstaben der Option durch das Formular bewegt, dann wird die Option ausgewählt.

Kann man das abstellen? Gibt es einen workaround?

Per removeChild die Option zu entfernen bringts nicht, da dann das $_POST array verändert wird.
style display:none und visibilty:hidden funktionieren auch nicht im IE

Vielen Dank vorab für Eure Hilfe.

So hier ein wenig HTML um das Problem zu testen.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
		<meta http-equiv="imagetoolbar" content="no">
		<title>IE Bug Test</title>
		<script type="text/javascript">
			<!--
			function irgendwas(){
				// do something;
			}
			//-->
		</script>
	</head>
	<body>
		<!-- action, submit, reset werden per js dynamisch aufgerufen -->
		<form id="try" action="" name="try" method="post">
			<label for="auswahl">Auswahlfeld </label>
			<select id="auswahl" size="1" name="auswahl" onChange="irgendwas()">
				<option id="opt1" value="m³" selected="selected">m&sup3;</option>
				<option id="opt2" value="Liter">Liter</option>
				<option id="opt3" value="cm">cm</option>
				<option id="opt4" value="kWh" disabled="disabled">kWh</option>
			</select>
		</form>
	</body>
</html>

Es macht keinen Unterschied, ob ein einfaches disabled oder disabled="disabled" benutzt wird.

**mikdoe** · 25-06-2011, 08:34

Kannst du bitte mal das HTML zeigen wo das mit nachstellbar ist.

**scrypter** · 25-06-2011, 14:20

Klar - ist erledigt, siehe oben

**kkapsner** · 25-06-2011, 17:23

Ist anscheinend ein IE-Bug...
Hier mal ein Abriss, wie man es umgehen könnte:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
window.onload = function(){
	var test = document.getElementById("select");
	var oldValue = test.value;
	test.onchange = function(){
		if (this.options[this.selectedIndex].disabled){
			this.value = oldValue;
		}
		else {
			oldValue = this.value;
		}
	}
};
</script>
<style type="text/css"></style>
</head>
<body>
<select id="select">
	<option value="1">eins</option>
	<option value="2">zwei</option>
	<option value="3" disabled>drei</option>
</select>
</body>
</html>

**scrypter** · 25-06-2011, 18:02

noch'n Bug - dacht ich's doch
ok, danke erst mal

ich werde das mal testen, wobei die onload function bestimmt ziemlich umfangreich wird und wahrscheinlich auch ein timeout braucht bis das Formular komplett geladen ist...

**kkapsner** · 25-06-2011, 18:21

Das onload wartet schon, bis das <form> komplett geladen ist.

**scrypter** · 27-06-2011, 01:39

So.. - Problem ausgehebelt

dank der Anregung von kkapsner.

Ich habe das allerdings nicht per onload gelöst, sondern über onfocus und onblur der betroffenen selects.
Dazu brauchte ich eine globale Variable und zwei kleine Funktionen.
Wird nun eine disabled Option gewählt, wird das select zurückgesetzt und es gibt eine Meldung.

Besten Dank nochmal für die Unterstützung.

Hier noch der code, passend zum eingangs geposteten Beispiels:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
		<meta http-equiv="imagetoolbar" content="no">
		<meta http-equiv="X-UA-Compatible" content="IE=8">
		<title>IE Bug Test</title>
		<script type="text/javascript">
			<!--
			function irgendwas(){
				// do something;
			}
			
			var globalstorage = 0;
			
			function backup (sID) {
				if (navigator.appName == 'Microsoft Internet Explorer') {
					globalstorage = document.getElementById(sID).selectedIndex;
				}
			}
			
			function IEbug (bugID) {
				var i = document.getElementById(bugID).selectedIndex;
				if (navigator.appName == 'Microsoft Internet Explorer' && document.getElementById(bugID).options[i].disabled) {
					document.getElementById(bugID).selectedIndex = globalstorage;
					document.getElementById(bugID).focus();
					alert('Aufgrund eines Programmfehlers des Internet Explorers\nkonnten Sie eine falsche Auswahl treffen.\n\nIhre Auswahl wurde automatisch zurückgesetzt.\nBitte wählen Sie eine andere Option aus.');
				}
			}
			//-->
		</script>
	</head>
	<body>
		<!-- action, submit, reset werden per js dynamisch aufgerufen -->
		<form id="try" action="" name="try" method="post">
			<label for="auswahl">Auswahlfeld </label>
			<select id="auswahl" size="1" name="auswahl" onchange="irgendwas();" onfocus="backup(this.id);" onblur="IEbug(this.id);">
				<option id="opt1" value="m³" selected="selected">m&sup3;</option>
				<option id="opt2" value="Liter">Liter</option>
				<option id="opt3" value="cm">cm</option>
				<option id="opt4" value="kWh" disabled="disabled">kWh</option>
			</select>
		</form>
	</body>
</html>

**kkapsner** · 27-06-2011, 01:48

Das onload war nur dazu da, den EventListener (deine hast du direkt im HTML gesetzt) zu setzten.
Aber warum arbeitest du hier mit onfocus/onblur und nicht auch mit onchange?

**scrypter** · 27-06-2011, 02:01

bei onchange bekommt die globale Variable bereits den selectedIndex der neuen Auswahl (also im IE halt u.U. den einer disabled option) übergeben
das select lässt sich dann nicht auf den letzten Index zurücksetzen sondern müsste auf eine feste Vorgabe gesetzt werden
zum Auswählen wird zuerst der focus gesetzt, d.h. ein korrekter Index wird global gespeichert und die Meldung kommt erst beim Verlassen des selects, das gibt dem user die Chance sich selbst zu korrigieren bzw. wenn zwei Optionen den gleichen Anfangsbuchstaben haben durch den zweiten Tastendruck eine gültige Auswahl zu erreichen

**kkapsner** · 27-06-2011, 23:51

Das mit dem zweiten Tastendruck ist ein Punkt...

Thema: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

LinkBack

Themen-Optionen

Anzeige

IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

AW: IE8 bug: select option disabled trotzdem per Tastatur auswählbar

Ähnliche Themen

disabled <select> per POST übergeben?

Select -> Option -> Delete

<option> breiter als <select>

select option :D

Moin, select/option!

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

PHP Mehrdimensionales Array...

Anordnung von Boxen und...

Probleme bei Erstellen einer...

Anordnung von Boxen und...

SSL/HTTPS Node.js/Socket.io Server

PHP Mehrdimensionales Array...

Anordnung von Boxen und...

SSL/HTTPS Node.js/Socket.io Server