superplaceholder.js 
Super charge your input placeholders
DEMO • Installation • Usage
superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.
Installation
superplaceholder.js is less than 1KB minified & gzipped.
- NPM:
npm install superplaceholder - Yarn:
yarn add superplacholder - Bower:
bower 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, // [DEPRECATED]
// 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: ', ',
// Control onFocus behaviour. Default is `superplaceholder.Actions.START`
onFocusAction: superplaceholder.Actions.[NOTHING, START, STOP]
// Control onBlur behaviour. Default is `superplaceholder.Actions.STOP`
onBlurAction: superplaceholder.Actions.[NOTHING, START, STOP]
}
});
Manually Controlling a superplaceholder instance:
// Complete manual control
const instance = superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Any format works', 'http://yahoo.com', 'www.facebook.com', 'airbnb.com' ],
options: {
onFocusAction: superplaceholder.Actions.NOTHING
onBlurAction: superplaceholder.Actions.NOTHING
}
});
// Later, whenever you want
instance.start();
instance.stop();
instance.destroy(); // to completely remove superplaceholder from an input
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.
Contributing
Interested in contributing features and fixes?
Changelog
See the Changelog.
License
Copyright (c) 2019 Kushagra Gour, https://kushagragour.in
This work is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.