t3n News Entwicklung

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

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.

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

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?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Christian Vöst am 13.03.2016 (12:48 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
HTML-Formulare sind langweilig? Mit diesen 5 grandiosen Javascript-Libs bringen wir Schwung in eure Webseite
HTML-Formulare sind langweilig? Mit diesen 5 grandiosen Javascript-Libs bringen wir Schwung in eure Webseite

Ohne HTML-Formulare würden die meisten Webseiten nicht funktionieren. Egal ob wir eine Bestellung aufgeben, mit jemanden in Kontakt treten oder uns einloggen wollen - ohne HTML-Formulare geht es … » weiterlesen

Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript
Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript

Push-Notifications sind auf Smartphones und Tablets schon länger ein beliebtes Mittel, um die Nutzer über eine wichtige Neuigkeit zu informieren. Egal ob das Wetter schlecht wird oder der … » weiterlesen

5 praktische CSS-Libs: Wenn JavaScript pause machen darf
5 praktische CSS-Libs: Wenn JavaScript pause machen darf

CSS ist ein sehr mächtiges Werkzeug geworden und verdrängt in vielen Bereichen JavaScript immer weiter. Wofür wir früher jQuery benutzen mussten, kann heute schon mit reinem CSS gelöst … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?