Placeholder-Ersatz für den Internet Explorer 8 und 9
von Oliver Richter (Kommentare: 3)
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.
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
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.