Frage zum Wiki-Artikel „Buttons_und_Schalter“

[Chnutz]

Liebe HTML- und CSS-UserInnen,

mit dem Beispiel "Flipflop-Schalter" habe ich ein interessantes Problem: Das Ganze funktioniert bei mir wunderbar und sieht auch schick aus… ...aber beim IE 11 wird onchange nicht mehr ausgelöst.

Ich habe darum folgendermaßen getestet: Reiner Checkbutton: Alles funktioniert, onchange löst aus:

<div>
   <label><input type=\"checkbox\" id="umkreisschalter" name="Umkreisschalter" onchange="aufzu('entfernung',this.checked)"> </label>...im Umkreis
	</div>

span mit class eingehängt: Ausschließlich IE 11 verweigert die onchange-Funktion:

<div>
   <label><input type=\"checkbox\" id="umkreisschalter" name="Umkreisschalter" onchange="aufzu('entfernung',this.checked)"> <span class="slider"></span></label>...im Umkreis
	</div>

Nur span ohne class eingehängt: Ausschließlich IE 11 verweigert die onchange-Funktion:

<div>
   <label><input type=\"checkbox\" id="umkreisschalter" name="Umkreisschalter" onchange="aufzu('entfernung',this.checked)"> <span></span></label>...im Umkreis
	</div>

Leerzeichen vor oder nach dem span-Tags löschen oder setzen ändern nichts.

class und span wieder eingehängt: Ausschließlich beim IE 11 wird onchange nicht mehr beachtet, bei FF läuft alles unproblematisch:

<div class="toggle text">
   <label><input type=\"checkbox\" id="umkreisschalter" name="Umkreisschalter" onchange="aufzu('entfernung',this.checked)"> <span class="slider"></span></label>...im Umkreis
	</div>

Also verträgt der IE 11 in diesem Fall wohl keinen <span></span>-Tag 👺 Von mir gibt es jetzt nur noch ein lautes und ausdauernders Hääää?

Hat irgendwer dazu eine Idee (außer der, den ca. 5% IE 11-NutzerInnen zu raten, diesen Müllbrowser nicht mehr zu benutzen)?

Vielleicht sollte, sofern niemand eine schnelle Idee hat, bei dem Beispiel solange ein Hinweis zugefügt werden, dass es beim IE nicht richtig funktioniert.

Liebe Grüße Chnutz

[Rolf B]

Hallo Chnutz,

du solltest bitte den äußerst unwahrscheinlichen, aber nicht unmöglichen Umstand in Erwägung ziehen, dass dein Code nicht vollkommen ist.

Ich habe das Frickl-Beispiel im IE11 geöffnet und es funktioniert. Ich habe dem zweiten Schalter ein onchange="foo()" Attribut hinzugefügt, sowie ein Funktione

function foo() {
   alert("bar!");
}

ins JavaScript Fenster getippt, und es funktioniert. Mit slider-<span>. Und der Alert kommt hoch. Ehrlich! Kein Scheiß!

Ockhams Rasiermesser sagt: Du machst was falsch. Oder du führst das Fehlverhalten deiner Seite auf die falschen Ursachen zurück. Auf Grund dessen, was Du gepostet hast, kann ich das aber nicht erkennen. Das einzige, was ich da sehe und was mich wundert, ist

<input type=\"checkbox\">

Wo hast Du das herkopiert? In unserem Wiki sehe ich das nicht. Sowas macht man, wenn man HTML dynamisch im JavaScript generiert (oder in PHP) und Anführungszeichen innerhalb Strings maskieren muss. Aber dann macht man es konsequent überall, und nicht nur für ein Attribut.

Wenn die Backslashes im HTML landen, sorgen sie dafür, dass der Browser die Anführungszeichen als Teil des input-type ansieht, und einen Type "checkbox" gibt es nicht. Der Typ heißt checkbox. So ein Typname kann in Anführungszeichen gesetzt werden, aber die dürfen dann nicht escaped werden. Aus einem unbekannten type wird ein type="text". Aber auch für text-Inputs gibt es change-Events. Egal ob ein span dahinter steht oder nicht.

Also: Bitte nimm diese Backslashes weg, oder erkläre, warum sie unbedingt nötig zu sein scheinen. Und dann versuche, ein minimales HTML und CSS zu bauen, das den Fehler zeigt. Ohne Schnick und Schnack, so klein wie es geht. Und das poste uns bitte. Oder stelle es irgendwo online zur Verfügung. Ich würde ja auf Codepen oder JSFiddle zeigen, aber die beiden verschmähen den IE mittlerweile.

Rolf

[Gunnar Bittersmann]

@@Rolf B

<input type=\"checkbox\">

Wo hast Du das herkopiert? In unserem Wiki sehe ich das nicht. Sowas macht man, wenn man HTML dynamisch im JavaScript generiert (oder in PHP)

Nö, auch dann nicht …

und Anführungszeichen innerhalb Strings maskieren muss.

… weil: muss man nicht. Es gibt zweierlei Anführungszeichen, da hat man '<input type="checkbox">' und "<input type='checkbox'>" zur Auswahl, das sollte genügen. Kein Bedarf für Escape-Orgien.

In JavaScript außerdem noch die Backticks; da kann man gleich noch Werte einfügen: `<input type="checkbox" id="${id}">`. Kein Bedarf für Stringkonkatenations-Orgien à la '<input type="checkbox" id="' + id + '">'

In PHP hat man noch Heredoc- und Nowdoc-Syntax. Aber bei PHP bin ich ja sowieso der Meinung, dass man was falsch macht, wenn man Markup mit echo ausgibt. <input type="checkbox" id="<?php echo $id ?>">, nicht echo '<input type="checkbox" id="' . $id . '">'

LLAP 🖖