A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
Use the plugin as follows:
.placeholder css class will be added. You can override default by passing the
$'input, textarea'placeholdercustomClass: 'my-placeholder';
You’ll still be able to use
jQuery#val() to get and set the input values. If the element is currently showing a placeholder,
.val() will return an empty string instead of the placeholder text, just like it does in browsers with a native
@placeholder implementation. Calling
.val('') to set an element’s value to the empty string will result in the placeholder text (re)appearing.
The plugin automatically adds
class="placeholder" to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:
I’d suggest sticking to the
#aaa color for placeholder text, as it’s the default in most browsers that support
@placeholder. If you really want to, though, you can style the placeholder text in some of the browsers that natively support it.
You can install jquery-placeholder by using Bower.
bower install jquery-placeholder
Contributors should install the »dev dependencies« after forking and cloning via npm.
Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see v1.8.7.
Works in all A-grade browsers, including IE6.
Automatically checks if the browser natively supports the HTML5
textareaelements. If this is the case, the plugin won’t do anything. If
@placeholderis only supported for
inputelements, the plugin will leave those alone and apply to
textareas exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)
Caches the results of its two feature tests in
jQuery.fn.placeholder.textarea. For example, if
@placeholderis natively supported for
true. After loading the plugin, you can re-use these properties in your own code.
Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra
inputelement to fake
@placeholderfor password inputs. This means you can safely do stuff like:Example label
<label>will always point to the
<input>element you’d expect. Also, all CSS styles based on the ID will just work™.
This plugin is available under the MIT license.
- Paul Irish for his inspiring snippet in jQuery 1.4 Hawtness #1
- everyone from #jquery for the tips, ideas and patches
- temp01 for his major contributions
- anyone who contributed a patch or made a helpful suggestion