Watermark

This watermark was designed to enable users to create simple, cross-browser watermarks and make it extensible enough so that watermarks can be created numerous ways. Most importantly, the watermarks require no additional javascript to load since the class will do it for you.

How it works

• If {remove:true} is passed, replaces the parent node with the passed element
• Otherwise…
• Wraps element in a span with custom attribute wmwrap
• Adds label before element, but within span
• Adds watermark html to label
• Adds any custom class to label
• Adds any custom css to label
• Overrides css setting position, width, left, display, and cursor of label
• Adds color to label if custom css or class is not passed
• Anything css passed in ‘inherit’ is applied to the label based on the element’s style
• Adds click event to label which gives the element focus
• Hides label on element focus, and shows/hides label on element blur
• addwatermarks - Finds all elements with ‘watermark’ attribute and calls the watermark function
• clearwatermarks - finds all elements with ‘wmwrap’ attribute and replaces it with the input or textarea inside it

Demo

An example of the watermark class can be viewed here.