Find file
Fetching contributors…
Cannot retrieve contributors at this time
41 lines (25 sloc) 1.67 KB

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

Example Usage


<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.">
<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>


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


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


  • 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.


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