Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

HTML5 Placeholder Ersatz mit JavaScript

Auf dieser Seite gibt es einen JavaScript Fallback für das neue HTML5 Placeholder-Attribut.
HTML5

Mit HTML5 wurde die Palette der Attribute für Formularfelder, wie etwa input oder textarea, stark erweitert. Eines dieser neuen Attribute ist der sogenannte Placeholder. Wird ein Formularfeld mit dem Placeholder fokussiert und wird ein Zeichen eingegeben, so verschwindet dieser. Wird das Feld ohne Eingabe wieder verlassen, so erscheint wieder der Platzhalter. Leider gibt es nun Browser, vor allem ältere (Safari kleiner Version 4, Firefox kleiner Version 7, Opera kleiner Version 11.5, Internet Explorer kleiner Version 10), die das Attribut Placeholder nicht kennen, und es somit nicht umsetzen. Um diesen netten Effekt in allen Browsern verfügbar zu machen, wenden wir nun ein kleines Skript an, das diesen Effekt imitiert.

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ---------------- JS Placeholder Fallback v. 1.1 -------------------
// ------------------ Copyright 2013 Patrick Saar --------------------
// -------------------------------------------------------------------

var placeholder = {
    init: function (color, defaultColor) {
        var tags = new Array('input', 'textarea');
        for (var i = tags.length; i--; ) {
            this.setPlaceholder(tags[i], color);
            this.focus(tags[i], defaultColor);
            this.blur(tags[i], color);
            this.submit(tags[i]);
        }
    },
    setPlaceholder: function (tagName, color) {
        var tag = document.getElementsByTagName(tagName);
        for (var i = tag.length; i--; ) {
            if (tag[i].getAttribute('placeholder') !== null) {
                tag[i].value = tag[i].getAttribute('placeholder');
                tag[i].style.color = color;
            }
        }
    },
    focus: function (tagName, color) {
        var tag = document.getElementsByTagName(tagName);
        for (var i = tag.length; i--; ) {
            if (tag[i].getAttribute('placeholder') !== null) {
                tag[i].onfocus = function () {
                    if (this.value === this.getAttribute('placeholder')) {
                        this.value = '';
                        this.style.color = color;
                    }
                };
            }
        }
    },
    blur: function (tagName, color) {
        var tag = document.getElementsByTagName(tagName);
        for (var i = tag.length; i--; ) {
            if (tag[i].getAttribute('placeholder') !== null) {
                tag[i].onblur = function () {
                    if (this.value === '') {
                        this.value = this.getAttribute('placeholder');
                        this.style.color = color;
                    }
                };
            }
        }
    },
    submit: function (tagName) {
        var tag = document.getElementsByTagName(tagName);
        var forms = document.getElementsByTagName('form');
        for (var j = forms.length; j--; ) {
            forms[j].onsubmit = function () {
                for (var i = tag.length; i--; ) {
                    if (tag[i].getAttribute('placeholder') !== null) {
                        if (tag[i].value === tag[i].getAttribute('placeholder')) {
                            tag[i].value = '';
                        }
                    }
                }
            };
        }
    }
};

window.onload = function() {
    placeholder.init('#999', '#000'); // Placeholder Ersatz anwenden.
                                      // Parameter 1: Schriftfarbe Platzhalter
                                      // Parameter 2: Schriftfarbe bei Eingabe
};

Zu diesem Zweck gibt es vier Methoden:

init: Wendet den Placeholder Fallback auf alle input- und textarea-Tags, die ein Placeholder-Attribut besitzen, an. Diese Methode besitzt zwei Parameter. Erstens die Schriftfarbe der Platzhalter und Zweitens die Schriftfarbe der Formularfelder bei einer Eingabe durch den User.

focus: Beschreibt den Effekt, wenn der User eines dieser Felder fokussiert/anklickt.

blur: Beschreibt den Effekt, wenn der User das Feld ohne Eingabe wieder verlässt.

submit: Löscht die künstlich erschaffenen Platzhalter vor dem Absenden des Formulars, damit eine korrekte Validierung der Eingaben, sei es mit dem HTML5 Attribut required, JavaScript oder serverseitig (was man ja immer tun sollte), möglich ist.

<form>
<input type="text" placeholder="Ich bin ein Platzhalter" />
<input type="submit" value="Absenden" />
</form>

Unten gibt es wie immer ein Beispiel, das am besten mit einem Browser getestet wird, welcher das Placeholder-Attribut nicht kennt. Außerdem der Link zum Download des Skripts, welcher auch eine minifizierte Version beinhaltet.

NEU: JS Placeholder Fallback funktioniert nun auch für Passwortfelder.

Beispiel

1,7 KB - Downloads: 1076

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok