Placeholder-Ersatz für den Internet Explorer 8 und 9

von Oliver Richter (Kommentare: 3)

Bild: Input-Text-Feld mit Placeholder

Es gibt eine Reihe von Formularen, die zwar korrekter Weise zu jedem Eingabefeld auch ein Label-Element zur Bezeichnung des Feldes im Markup verwenden, das Label jedoch via CSS ausblenden und im Frontend nur das entsprechende Eingabefeld <input> oder <textarea> oder ähnliches mit entsprechendem Platzhalter zu sehen ist. Dabei dient der Platzhalter als Beschreibung für das entsprechende Feld.
Die Internet Explorer bis Version 8 und 9 unterstützen nun aber leider kein Placeholder-Attribut. Es wird somit kein entsprechender Text im Eingabefeld angezeigt. Um diese Funktionalität nachträglich via Javascript (JQuery) auch in den alten Internet Explorern zu gewährleisten, verwende ich das folgende Script:

 

////////////////////////////////////////////////////////////////////////////////
// START: IE8-, IE9-Placeholder-Support
////////////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
	
	$('[placeholder]').each(function(index) // scan for every element containing a placeholder attribute {
		// equip every object's value width placeholder text
		if ($(this).val() == '') $(this).val( $(this).attr('placeholder'));
	
		// on focusing the element
		$(this).focus(function() {
			if ( $(this).val() == $(this).attr('placeholder') ) $(this).val('');
		});
	
		// on bluring the element 
		$(this).blur(function() {
			if ( $(this).val() == '' ) $(this).val( $(this).attr('placeholder'));
		}); 
	
		// don't submit/send placeholder text
		$(this).parents("form").submit(function () {    
			$(this).find('[placeholder]').each(function() {
				if ( $(this).val() == $(this).attr('placeholder') ) $(this).val(''); 
			});       
		});
	
	});
});

Bitte denken Sie daran, dass Sie eine aktuelle (Stand August 2014) JQuery-Framework-Datei einbinden und zusätzlich anschließend die im Download angebotene Javascript-Datei. Um dass die Datei auch wirklich nur vom Internet-Explorer bis Version 9 ausgeführt wird, verwenden Sie zur Einbindung der Datei folgendes Conditional Comment:

 

<!--[if lte IE 9]>
<script src="files/js/iefix.js"></script>
<![endif]-->

Bitte passen Sie den Pfadnamen zur Datei entsprechend an. Mit dem Conditional Comment wird sicher gestellt, dass wirklich nur Internet Explorer (kleiner und bis Version 9) dieses Javascript ausführt. Es ist ein sicherer Weg, um alle anderen Browser von dieser Javascript-Datei auszuschließen.

Zurück

Einen Kommentar schreiben

Kommentar von Frank |

Super Arbeit, vielen Dank.

Antwort von Oliver Richter

Danke :)

Kommentar von Dimi |

Hat super funktioniert, danke!

Antwort von Oliver Richter

Das freut mich. 

Kommentar von Rico |

Dies ähnelt zwar dem Platzhalter-Verhalten, widerspiegelt es aber nicht korrekt wieder. Mit dieser Lösung werden Werte, welche dem Platzhalter gleichen, nie mit gesandt. Beispielsweise falls ich mein Kennwort im Feld Kennwort auch Kennwort wäre, könnte ich mich nie anmelden.

Antwort von Oliver Richter

Ja, das stimmt. Ich musste diese sicher nicht perfekte Lösung aber mal sehr eilig auf Wunsch eines Kunden implementieren und im Ansatz tut es seine Aufgabe. In meinem Beispiel sollte es auch nur als Alternative für den Internet Explorer 8 und 9 her halten.  

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht

Wie kann ich Ihnen helfen?

Sie erreichen mich über mein Kontaktformular