Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
JavaScript
branch: master

This branch is 105 commits behind mathiasbynens:gh-pages

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitattributes
.gitignore
LICENSE-GPL.txt
LICENSE-MIT.txt
README.md
demo.html
jquery.placeholder.js
jquery.placeholder.min.js

README.md

HTML5 Placeholder jQuery Plugin

Demo & Examples

http://mathiasbynens.be/demo/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. http://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

$('input, textarea').placeholder();

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; }

Notes

  • Works in all A-grade browsers, including IE6.
  • The plugin automatically checks if the browser natively supports the HTML5 placeholder attribute for input and textarea elements. If this is the case, the plugin won’t do anything. If @placeholder is only supported for input elements, 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.)

License

This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.

Credits

Kudos to Paul Irish for his inspiring snippet in jQuery 1.4 Hawtness #1 and everyone from #jquery for the tips, ideas and patches.

Mathias

Something went wrong with that request. Please try again.