HTML5 Placeholder jQuery Plugin
Demo & Examples
https://mathiasbynens.github.io/jquery-placeholder/
Example Usage
HTML
<input type="text" name="name" placeholder="e.g. John Doe"> <input type="email" name="email" placeholder="e.g. [email protected]"> <input type="url" name="url" placeholder="e.g. https://mathiasbynens.be/"> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"> <input type="password" name="password" placeholder="e.g. h4x0rpr00fz"> <input type="search" name="search" placeholder="Search this site…"> <textarea name="message" placeholder="Your message goes here"></textarea>
jQuery
Use the plugin as follows:
$('input, textarea').placeholder();
By default, .placeholder
css class will be added. You can override default by passing the customClass
option:
$('input, textarea').placeholder({ customClass: '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.
CSS
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:
input, textarea { color: #000; } .placeholder { color: #aaa; }
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.
Installation
You can install jquery-placeholder by using Bower.
bower install jquery-placeholder
Or you can install it through npm:
npm install --save jquery-placeholder
Contributors should install the »dev dependencies« after forking and cloning via npm.
npm install
Notes
-
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
placeholder
attribute forinput
andtextarea
elements. If this is the case, the plugin won’t do anything. If@placeholder
is only supported forinput
elements, the plugin will leave those alone and apply totextarea
s 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.input
andjQuery.fn.placeholder.textarea
. For example, if@placeholder
is natively supported forinput
elements,jQuery.fn.placeholder.input
will betrue
. After loading the plugin, you can re-use these properties in your own code. -
Using
<input type="reset" />
will break the plugin functionality -
Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra
input
element to fake@placeholder
for password inputs. This means you can safely do stuff like:<label for="bar">Example label</label> <input type="password" placeholder="foo" id="bar">
And the
<label>
will always point to the<input>
element you’d expect. Also, all CSS styles based on the ID will just work™.
License
This plugin is available under the MIT license.
Thanks to…
- Paul Irish for his inspiring snippet in jQuery 1.4 Hawtness #1
- everyone from #jquery for the tips, ideas and patches
- anyone who contributed a patch or made a helpful suggestion
– Mathias