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.
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.
superplaceholder({
el: <target_input_element>,
sentences: <array_of_texts>,
options: {} // optional customizable parameters
});superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Something to show', 'Another thing to show']
});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: '|'
}
});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.
Interested in contributing features and fixes?
See the Changelog.
Copyright (c) 2018 Kushagra Gour, http://kushagragour.in This work is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.