Watermark Input Plugin



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

Downloads

Most Recent

Watermark Input Beta 1