A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 5 commits ahead, 150 commits behind mathiasbynens:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitattributes
.gitignore
README.md
jquery.placeholder.js
jquery.placeholder.min.js

README.md

HTML5 Placeholder jQuery Plugin

This plugin was based on a code snippet by Paul Irish, featured in jQuery 1.4 Hawtness #1. I added some functionality, did some optimizations here and there, and made a plugin out of it.

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 supports the HTML5 placeholder attribute for inputs natively. If this is the case, the plugin won’t do anything.

Credits

Kudos to Paul Irish for his snippet and everyone from #jquery for the tips and ideas.

Mathias