Placeholder Caret Animation
Switch branches/tags
Clone or download
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
README.md
bower.json
gulpfile.js
index.html
package.json
placeholdem.js
placeholdem.min.js

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]' ) );