🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Core Java Script Forms

Documentation

superplaceholder.js npm version

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.

Demo

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?

Read more on contributing.

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.


You May Also Like