bornasepic / placeholder-typewriter

Pure JavaScript plugin for animating placeholders on input elements

Placeholder-Typewriter

Preview: https://bornasepic.me/placeholder-typewriter/

Pure JavaScript plugin for animating placeholders on input elements

How to use:

1. Include the typewriter.js script into your file before the tag.
2. Call the typewriter with the new Typewriter constructor function
3. Enjoy

API

Calling a new instance of the typewriter:

new TypeWriter('#zipcodeInput', ['Input Your Zip Code', 'eg. 93108'], {writeDelay: 200});

The new TypeWriter accepts three arguments

1. A querySelector to select the input field
2. An array of strings to be typed out in the selected input field
3. An options settings object to overwrite default settings

Settings

• writeDelay => Delay between each letter is written (default: 60ms)
  --expecting a number of miliseconds
• deleteDelay => Delay between each letter is removed (default: 40ms)
  --expecting a number of miliseconds
• holdOnceWritten => Delay once the current phrase has been fully displayed (default: 1000ms)
  --expecting a number of miliseconds
• holdOnceDeleted => Delay once the current phrase has been fully deleted (default: 1000ms)
  --expecting a number of miliseconds
• stopAfterOnce => Runs through the phrases only once, then leaves the first phrase as a static placeholder
  --expecting a boolean

placeholder-typewriter's Issues

Stop effect on form focus

Is it somehow possible to stop the effect (not type anything) when the user has his cursor inside the form?
As soon as the user types it's gone anyway. But it's pretty misleading that the cursor of the user appears + the automatic typing text.

Can this be removed somehow as soon as the user clicks in the side the form (and bring it back when the user clicks outside of it again)?