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
Quelloffener HTML-Editor für Anfänger: GrapeJS im Schnellcheck
Quelloffener HTML-Editor für Anfänger: GrapeJS im Schnellcheck

Wer die eigene Website optisch und ohne Code-Kenntnisse anpassen möchte, sollte einen Blick auf GrapeJS werfen. Der speziell für Anfänger konzipierte Template-Editor auf HTML-Basis steht … » weiterlesen

Dezentrale Apps mit Lisk: Aachener Startup setzt auf JavaScript und Blockchain-Technologie
Dezentrale Apps mit Lisk: Aachener Startup setzt auf JavaScript und Blockchain-Technologie

Mit Lisk sollen JavaScript-Entwickler eigene Blockchains erstellen und für dezentrale Apps nutzen können. Wir verraten euch, was hinter dem ambitionierten Projekt steckt. » weiterlesen

Tooltips ohne JavaScript: Das kann Hint.css 2.0
Tooltips ohne JavaScript: Das kann Hint.css 2.0

Mit Hint.css baut ihr ganz ohne Javascript schicke Tooltips in eure Web-Apps ein. Wir werfen einen kurzen Blick auf Version 2.0 der Library. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?