Replaceholder jQuery Plugin

In two recent posts I used a simple JavaScript function to replace the placeholder attribute of an input element with a value attribute.  Since I’ve used it twice now I decided to make it into a simple jQuery plugin and wanted to give it to everyone else as well. The best part is you can now start using this HTML5 attribute before it’s fully supported!

Demo | Download

What does it do?

Replaceholder simply scans your file for input elements with the placeholder attribute and replaces it with a value attribute for cross-browser feng shui. It mimics the basic placeholder functionality by saving the placeholder value of each field and on focus removes the value from the input. As the user interacts with the field it removes and replaces the value of the field unless the user has added content. From this:

<input type="text" class="search" placeholder="Search" />

To this:

<input type="text" class="search" value="Search" />

How it works

1. Download the plugin
2. Unzip the file and grab either the development version (jquery.replaceholder.js) or the production version (jquery.replaceholder-min.js)
3. Add the <script> tag

   <script type="text/javascript" src="path/to/file/jquery.replaceholder.min.js"></script>

4. Run plugin

   $.fn.replaceholder();

5. ???
6. Profit!

That’s all you need to do.

Copypasta?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="path/to/file/jquery.replaceholder.min.js"></script>
<script type="text/javascript">
$(function() {
	$.fn.replaceholder();
});
</script>

Using the above code you should only have to update “path/to/file/” with the location to your saved file!

Customizing the Plugin

You can change the focus text color and the blur text color by passing these two properties:

$.fn.replaceholder({
	focusColor:'#000',
	blurColor:'#aaa'
});

You can also specify the elements you want to apply replaceholder to:

$('.search').replaceholder();

Feel free to use and abuse this code. If you end up using it let me know! Enjoy!