Marko Anastasov wrote this on February 28, 2011

jQuery plugin to reuse input placeholders on older browsers

Here’s something tiny and new on our GitHub: jquery-placeholders. It is a “jQuery plugin for input hints which uses your placeholder HTML5 attributes, so you can write markup for modern browsers first and degrade gracefully”.

For example, given you have this markup:

<input type="text" name="name" value="" id="name" placeholder="Your name">
<input type="text" name="email" value="" id="email" placeholder="Email">

When you add this piece of JavaScript:

$("#someForm").placeholders(["#name", "#email"]);

Then the plugin will do all the magic about putting the placeholder text in input fields, hiding it on focus, putting it back when the input is cleared, and preventing it from being submitted as input value. There’s a demo page that shows it all.

Enjoy!