Awesome

Placeholder Enhanced 1.6.9

This jQuery Placeholder plugin is an enhanced polyfill for the HTML5 placeholder attribute.

Features

• Cross-browser & Cross-styling
• Support for all input types, password, textarea, text, email, search, url, etc...
• Robust: it heavely behave as the HTML5 placeholder defined in the specs
• Normalize placeholder behaviour in modern browsers (optional). This means the placeholder will hide on input focus.
• Fix jQuery.val() function to work as expected to set/get the value of inputs with placeholder
• Lightweight: 970 bytes minified & gzipped

Requires jQuery 1.4.4 or higher

Installation

bower install placeholder-enhanced

or download this repo

Usage

Just include the js file after jQuery on your HTML page and the plugin will be automatically initialized

<script src="jquery.js"></script>
<script src="jquery.placeholder-enhanced.js"></script>

If you want to initialize the plugin yourself after the first auto-initialize (for example after ajax content being loaded), just call the plugin like this:

$('input[placeholder], textarea[placeholder]').placeholderEnhanced();

Example:

Initialize the plugin after loading an HTML page via AJAX, call the plugin after the content is loaded.

$(function () {
  $.get('file.html', function (html) {
    $('#container')
      // append the html
      .append(html)
      // find any inputs or textareas with placeholder and initialize the plugin
      .find('input[placeholder], textarea[placeholder]').placeholderEnhanced();
  });
})

Destroy

If you want to destroy the plugin call:

$('input[placeholder], textarea[placeholder]').placeholderEnhanced('destroy');

It will automatically clean all what the plugin first created as if it was never initialized, only for the selected elements.

CSS

Customize the style of the placeholder with CSS in a cross-browser manner:

See placeholder-enhanced.css

Demo

For a demo see demo.html online

Build

If you want to work on the plugin there is a Makefile with two targets:

To lint with jshint

$ make lint

Minify the js file

$ make build

TODO

These are not major tasks, but nice to have:

• Create a kimbo.js plugin version.
• Create a plain JavaScript version?
• Create two separate versions.
  • Version 1.x to give full cross-browser support and normalization. (current version)
  • Version 2.x only to normalize modern browsers placeholder behaviour.

License

See LICENSE.txt