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. address@example.ext">
<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
placeholderattribute forinputandtextareaelements. If this is the case, the plugin won’t do anything. If@placeholderis only supported forinputelements, the plugin will leave those alone and apply totextareas 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.inputandjQuery.fn.placeholder.textarea. For example, if@placeholderis natively supported forinputelements,jQuery.fn.placeholder.inputwill 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
inputelement to fake@placeholderfor 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