Watermark Input Plugin

Download Latest (Beta 1)

Overview

This is a watermark input plugin for jQuery. Currently this is a beta release. This simple plugin allows forms with limited space to display additional information about the contents of a field.

Usage

First, include the watermark input javascript file.
<script src="jquery.watermarkinput.js" type="text/javascript"></script>
Next, call the watermark function for those items you wish to have watermarked.
jQuery(function($){
   $("#first").Watermark("First");
   $("#mi").Watermark("MI");
   $("#last").Watermark("Last");
   $("#suffix").Watermark("Suffix");
});
Optionally, if you are not satisfied with the default gray watermark color, you may pass a second argument to the watermark function.
jQuery(function($){
   $("#suffix").Watermark("Suffix","#369");
});
Finally, once you are ready to pull data from your watermarked input boxes, you can clear all of the watermarks and then replace them after you are finished.
function UseData(){
   $.Watermark.HideAll();
   //Do Stuff
   $.Watermark.ShowAll();
}

Demo

The following example is a demonstration form the examples above.
Name