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:

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.

Password Fields

Currently we do not support password fields, as it is very complex to get right.

In my opinion, it is OK to provide placeholders in password fields only for browsers that support it natively. If the browser does not support it, then the user will not see the placeholder, but that should be acceptable as the placeholder is only an extra bit of help and should not be critical to your interface.

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.