Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML-Placeholder aufmotzen: Mit der JavaScript-Library Superplaceholder.js bringen wir Pfiff rein

    HTML-Placeholder aufmotzen: Mit der JavaScript-Library Superplaceholder.js bringen wir Pfiff rein
Die JavaScript-Library Superplaceholder.js (Bild: GitHub)

HTML-Placeholder sind schon eine feine Sache. Sie können direkt in einem Input-Feld hinterlegt werden und geben euch mehr Informationen zur benötigten Eingabe oder ersetzen vollständig das Label. Manchmal will man aber gerne mehr Informationen im Placeholder hinterlegen als es lang ist. Um euer Layout trotzdem sauber zu halten, gibt es die JavaScript-Library Superplaceholder.js.

Die Library ist denkbar einfach. Es werden verschiedene Sätze, die im Placeholder angezeigt werden sollen, hinterlegt. Sie werden dann als Loop abgespielt und der Benutzer kann mehr Informationen zu einem Input-Feld erhalten oder wird durch die Animation aufmerksam. Wie das ganze im Detail funktioniert, gucken wir uns jetzt an.

JavaScript-Library Superplaceholder.js: Installation & Benutzung

Superplaceholder.js im Einsatz (Bild: <a href="https://github.com/chinchang/superplaceholder.js">GitHub</a>)
Superplaceholder.js im Einsatz (Bild: GitHub)

Damit Superplaceholder funktioniert, müssen wir zuerst vom GitHub-Repo die Datei superplaceholder.js runterladen und in unsere Seite einbetten. Wer lieber mit NPM oder Bower arbeitet, kann auch darüber die Library beziehen.

<script type="text/javascript" src="superplaceholder.js"></script>

In einer weiteren JavaScript-Datei oder als Inline-Script müssen wir jetzt den Befehl für die Ausführung aufrufen. Wichtig ist nur, dass dieser Befehl erst nach der Initialisierung der Library erfolgt:

superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Something to show', 'Another thing to show'],
options: {
letterDelay: 100,
sentenceDelay: 1000,
startOnFocus: true,
loop: true,
shuffle: false,
showCursor: true,
cursor: '|'
}
};
});

Mit dem Attribut el wird das jeweilige Input-Feld selektiert, sentences sorgt für die hinterlegten Sätze und options regelt die möglichen Optionen – sie können bei Bedarf gesetzt werden. Wer zum Beispiel will, dass die Sätze direkt abgespielt werden, kann einfach startOnFocus:false setzen. Alle Beispiele finden sich auch auf der offiziellen Webseite. Die Library erfordert zudem kein jQuery und kann mit nativem JavaScript ausgeführt werden.

Die Technik, die hinter Superplaceholder steckt, ist einfach: Der normale HTML-Placeholder wird zuerst ausgegeben und on the Fly mit JavaScript überschrieben. Dabei aktualisiert sich das Input-Feld bei jedem Character – und wir erhalten die Animation.

JavaScript-Library Superplaceholder.js: Kurz und knapp

Der Entwickler Kushagra Gour, der auch Hint.css entwickelt hat, stellt mit Superplaceholder.js eine weitere schlanke und einfache JavaScript-Library vor. Sie kann zwar nicht besonders viel, macht aber, was sie soll. Zudem ist sie mit ihrer Größe von einem Kilobyte sehr klein. Für die Benutzung werden aktuelle Browser benötigt, alte Browser erzeugen aber keinen Fehler, sondern zeigen den normalen Placeholder an.

Sicher kein Must-have für jedes Projekt, aber als kleines Gimmick für eine Webseite doch interessant – besonders, wenn wir ein sauberes Design haben wollen, und das ohne Labels oder Beschreibungen.

Kennt ihr auch noch tolle Mini-Libs, die ihr gerne immer mal wieder einsetzt?

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

1 Reaktionen
Christian Vöst

Schöne Library, lässt sich bestimmt in dem ein oder anderen Projekt einsetzen!

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen