jQuery Placeholder Plugin

This is a simple plugin for jQuery that provides support for the HTML5 placeholder attribute in browsers that do not already support it.

To use it, simply add the plugins CSS and JS files to the page and use the following JS to initialise it:

jQuery(document).ready(function($) {
  $(":input[placeholder]").placeholder();
});

Then in your HTML document, use the placeholder attribute with input tags. For example:

<input type='text' placeholder='Some placeholding text' />

If the browser already supports the placeholder attribute then the plugin will do nothing, unless you provide the overrideSupport option.

Options

The following options can be passed to the plugin.

activeClass

The class to apply when input is blurred. Defaults to placeholder

focusClass

The class to apply when input is active. Defaults to placeholderFocus

overrideSupport

Pass true to force the plugin to work on browsers which natively support the placeholder attribute. Defaults to false

preventRefreshIssues

Optionally attempt to prevent Firefox from auto filling values on refresh, by turning autocomplete off. Defaults to true

Using With Autofocus

If you want the field to autofocus when the browser loads, you need to ensure that you apply the placeholder first, as follows:

// apply placeholders - must be applied first before any autofocus actions
$(":input[placeholder]").placeholder();
// focus on the first text input field in the first field on the page
$("input[type='text']:first", document.forms[0]).focus().select();

Thanks to hostdude99 for the hint.

The Code

You can download the source code from GitHub or go to the plugins homepage for more information

Support

Please use the GitHub issues tracker for any bugs or issues.

Acknowledgements

Thanks to Mal Curtis for many bug fixes and enhancements. Has probably writting more of the code than I have ;-)

License

This code is available under the MIT License. See the LICENSE file for more details.