A place(holder) for everything

I’ve been working with a lot of forms recently and I am in love with the placeholder attribute. It lets you add contextual instructions or an example input to an input field. (That said, it’s not a replacement for labels!)

Now, if you want to demonstrate multiple example inputs or have more complicated instructions, standard placeholders won’t cut it. For that, you need a superplaceholder.js.

Created by Kushagra Gour, superplaceholder.js cycles through a list of strings once you click into an input field, augmenting the original placeholder. You can control the ‘typing speed’, speed at which the strings are cycles, and looping behavior.

Here’s how you initialize it:

```javascript superplaceholder({ // specify the input element 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: true,

// Initially shuffle the passed sentences
shuffle: false,

// Show cursor or not. Shows by default
showCursor: true,

// String to show as cursor
cursor: '|'   } }); ```

Easy, right? You can install it via npm, Bower, or just download the library from GitHub. Now go forth and form some forms!

Comments :)
2017 Neal Shyam