chinchang / superplaceholder.js

⚡Super charge your input placeholders

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?

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.

superplaceholder.js's Issues

How to stop it?

I wanna stop it when sometimes I need this. Why don't you open the interface of cleanup?

add option to ignore first words of placeholder

could be nice to ignore N first words (or N first chars) in the placeholder sentences
for example the first 2 words that are not changing in the sentences like "look for"

ex: [look for] something... ; [look for] something else...

Add tests

Add unit/functional tests for the library

Can we deprecate `document.querySelector()`?

Any jQuery plugin in now-a-days are smart enough selecting elements, and chaining functions. i.e.:

var foo_field = $('#foo-elem');
foo_field.pluginFunc().pluginFunc2({
    param: val,
});

And we can check the availability of that selector also:

if(foo_field.length > 0) {
    //call the plugin functionality
}

But for this plugin I'm having issues with: el: document.querySelector('#foo-elem'),

It's making redundancy and repeating in selecting DOM elements.

Build aborts due to warnings

jshint complains about prettiers wrapping of a ternary operator

➜  superplaceholder.js git:(master) ✗ grunt build
Running "jshint:files" (jshint) task

   src/superplaceholder.js
     88 |            ? ''
                     ^ Misleading line break before '?'; readers may interpret this as an expression boundary.

>> 1 error in 2 files
Warning: Task "jshint:files" failed. Use --force to continue.

Aborted due to warnings.

Importing in Svelte

I'm having trouble importing this library to svelte
Here's the code that I used

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

The error is

Cannot find module 'superplaceholder' imported from 'D:/Documents/Svelte/aol/src/routes/+page.svelte'

How do I import this library?

Download link

The download link in your website is not working, it's linked to the wrong file.

Add callbacks for more flexibility

Callbacks for various events in the library can be supported to provide more flexibility to users.

Eg. callback for begin, sentence end, loop end etc

Let it work without clicking/focusing on the input

Hello @chinchang, I love your libraries so much.

But as for this, I think you can implement a feature where the code will start running automatically without necessarily clicking on the input.

UPDATE !!!
I used the startOnFocus command, it worked but gave a deprecation warning. How do I make it start automatically without the deprecation warning ?

Thanks for reading 👍

placeholder="null" after input's blur

Placeholder text is not disappearing and it's value="null" string. Can you set placeholder to empty string? Also will be helpful options like: showOnlyOnFocus or hideOnBlur

Chrome: 62.0.3202.94
Using enviroment: react es6 import
Screenshots:

add option to stop superplaceholder at any time

Add feature list to readme

features:

• tiny size
• mobile supported
• easy to use

add option to stop superplaceholder once anything has been typed in the input

could be useful for a one time help till user starts typing anything and even if he deletes everything, he doesn't starts seeing the placeholder sentences again