superplaceholder.js

Super charge your input placeholders

superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

Demo

Installation

superplaceholder.js is less than 1KB minified & gzipped.

Bower: bower install superplaceholder
NPM: npm install superplaceholder
Download zip.

Note: superplaceholder.js supports AMD and commonJS module pattern out of the box.

Usage

Syntax

superplaceholder({
    el: <target_input_element>,
    sentences: <array_of_texts>,
    options: {} // optional customizable parameters
});

Basic

superplaceholder({
    el: document.querySelector('input'),
    sentences: [ 'Something to show', 'Another thing to show']
});

Customization

Pass an optional options object for custom settings.

superplaceholder({
    el: document.querySelector('input'),
    sentences: [ 'Something to show', 'Another thing to show'],
    options: {
        // delay between letters (in milliseconds)
        letterDelay: 100, // milliseconds
        // delay between sentences (in milliseconds)
        sentenceDelay: 1000,
        // should start on input focus. Set false to autostart
        startOnFocus: true,
        // loop through passed sentences
        loop: false,
        // Initially shuffle the passed sentences
        shuffle: false,
        // Show cursor or not. Shows by default
        showCursor: true,
        // String to show as cursor
        cursor: '|'
    }
});

Browser Support

superplaceholder.js works best on latest versions of Google Chrome, Firefox and Safari and Chrome mobile.

For all non-supported browsers, the library will graceful degradate without any explicit handling in your code.