jQuery.placeover

Text overlay for input fields. A new take on the placeholder shim for jQuery to provide HTML5 behavior to legacy browsers.

Many current placeholder plugins handle the placeholder by setting it as the value of the input and removing it when needed. Instead, Placeover positions text over the input, eliminating the hassle of ensuring the placeholders are not passed through with form submission as well as allowing a much closer replication of native behavior of the placeholder attribute in modern browsers.

This plugin was initially inspired by the OverText plugin for MooTools. It attempts to bring this basic concept to jQuery, but also improve the handling to match native placeholder handling.

Quickstart

You do not have to do anything special to use Placeover. Define a input as you would normally, specifying the placeholder with its attribute.

<input type="text" name="firstName" placeholder="First name" />

Then, attach the Placeover to inputs as you like after the document is ready:

$( function () {
  $('input').placeover();
});

Head on over to the website for full information, including documentation on options, methods, and events.

Compatibility

Created for use with IE 7-9 and jQuery 1.x. Placeover is designed as a shim, so it should be safe to use will all browsers, and by default delegates to native placeholder behavior.

Versioning

major.minor.patch, follows semantic versioning. See CHANGELOG.md for more information on specific versions and changes.

Author

Max Kramer

Connect with me on GitHib or Twitter

License

This software is released under MIT license. See LICENSE for full text.