Placeholder Caret Animation
CSS JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
CHANGELOG.md
CNAME
LICENSE.md initial commit Feb 8, 2014
README.md update readme to reflect project inactivity Nov 4, 2016
bower.json restore placeholder text when a form reset action occurs, close #12 Feb 9, 2015
gulpfile.js
index.html update link to my site as https Nov 4, 2016
package.json restore placeholder text when a form reset action occurs, close #12 Feb 9, 2015
placeholdem.js Added support for password input type. Apr 23, 2015
placeholdem.min.js Added support for password input type. Apr 23, 2015

README.md

Placeholdem

Project Status: Inactive - The project has reached a stable, usable state but is no longer being actively developed; support/maintenance will be provided as time allows.

2016-11-04 Update

This project is no longer being developed or maintained. The effect this plugin gives is visually appealing, but it's a bad practice in terms of usability and accessibility. On top of that, manipulating the values of different HTML5 input types directly has a lot of issues (text, email, number, search, etc.). I suggest using an alternative styling for labels and placeholders, such as Floating Labels.


Placeholder Caret Animation

  • Version: v1.0.2
  • Date: 2015-02-08

View Demo

Placeholdem is a JavaScript plugin that animates placeholder carets on inputs and textareas. The placeholder value will incrementally delete on focus, and restore on blur.

<!-- add placeholder to input or textarea -->
<input name="fieldname" placeholder="Placeholder Value" />
// run Placeholdem on all elements with placeholders
Placeholdem( document.querySelectorAll( '[placeholder]' ) );