jQuery focusMagic plugin demo page

This plugin is meant to expedite the basic process of making form fields empty on focus and refill on blur, depending on a few specs. The three different scenarios that I have built for are represented here.

Scenario 1
This is represented by the first two fields on the right. This scenario is the normal one. We want the label to become a watermark.

Scenario 2
Often times with forms there is validation server side. This scenario loads a server sent value. This plugin doesn't do anything and lets the value set by the server work by it's self.

Scenario 3
Every once in a while we want an exception. Well scenario three (the 'ignored' textarea on the right) displays how this works. To not use the plugin on a specific label / field, simply add an 'ignore' class to it.

Example form html

<form class='focusmagic'>
<p>
<label for="author">Enter your name</label>
<input id="author" type="text" tabindex="1" name="author"/>
</p>
<p>
<label for="email">Enter your email</label>
<input id="email" type="text" tabindex="2" value="Sent by server" name="email"/>
</p>
<p> <label for="comment" class="ignore">Add a comment ignored</label><br />
<textarea id="comment" tabindex="3" name="comment"></textarea> </p>
</form>

Example javascript / jquery load

<script src="jquery.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.focusmagic.js" type="text/javascript" charset="utf-8"></script>

This solution focuses on accessibility as it does not remove the label, just moves it off the viewport. This way, if a user does not have Javascript, CSS, or uses a screen reader, they will still get normal labels.

Please let me know what you think about it, or if there is anything I should do to improve. Are there any options I should include?

Thanks.

Download the plugin