These Days Labs

This plugin takes care of your input fields. Often used by opt-in input fields where the default value of the field is something like "Your e-mail address". If you click the field the text disappears so that you can type your e-mail address.

The plugin depends on the jQuery framework and is very simple to implement.

Put this in your HTML pages header:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.clearfield.js"></script>

Add this function somewhere on the page:

$(document).ready(function() {
	$('.clearField').clearField();
});

Your input field might look like this:

<input type="text" class="clearField" value="What's your name?" />

You'll end up with something like this:

As you can see the default value is grayed out, and when you type something in the field it's black. This is because the fields are provided with a specific class on the 'active' and 'blurred' state. I know, the active state doesn't have much added value, but hey... it's there. :) To style the field depending on it's status, just add these stylesheets to your layout:

.clearFieldBlurred { color: #666; font-style: italic; }
.clearFieldActive { color: #000; }

You probably only need the .clearFieldBlurred class, style it to your needs!
It's possible to rename those classes, do so in your javascript function:

$(document).ready(function() {
	$('.clearField').clearField({
		blurClass: 'myBlurredClass',
		activeClass: 'myActiveClass'
	});
});

You can now use clearField with pre-filled content. Say you have a field that asks for your name, but you want the name to be pre-filled?

Just add the original value to the "rel" attribute:

<input type="text" class="clearField" value="Stijn" rel="What's your name?" />

This will result in this (delete my name to see the result):

Check out the version history to find out what else is new.