Animated Placeholder Text In Pure JavaScript – superplaceholder.js

Category: Form , Javascript , Recommended | August 14, 2018
Author: chinchang
Views Total: 2,678
Official Page: Go to website
Last Update: August 14, 2018
License: MIT

Preview:

Animated Placeholder Text In Pure JavaScript – superplaceholder.js

Description:

superplaceholder.js is a JavaScript library for animated placeholders that allow you to rotate through an array of placeholder text with a typing effect inside the input field.

How to use it:

Place the superplaceholder.js script at the end of the document so the page loads faster.

<script src="dist/superplaceholder.js"></script>

Initialize the superplaceholder on the target input field.

superplaceholder({
  el: input1,
  sentences: [ 'www.cssscript.com', 'www.google.com', 'www.facebook.com' ],
  options: {
    loop: true
  }
})

All default options.

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,

  // shuffle the passed sentences
  shuffle: false,

  // show cursor
  showCursor: true,

  // cursor character
  cursor: '|'
  
}

Changelog:

v0.1.2 (08/14/2018)

  • Added more options

One thought on “Animated Placeholder Text In Pure JavaScript – superplaceholder.js

  1. Dedwards108

    Worked great, input1 refers to the id for the input you want the placeholder to be animated on.

    I changed the start on focus too so that it animates on page load. I changed “startOnFocus:!0” to “startOnFocus:!1”.

    Works much better than other options out there and the code was fairly small too.

    Reply

Leave a Reply