jQuery Watermark Plugin

v 3.1.3

This jQuery plugin will easily create watermark hints in input and textarea elements.

Features:

Demonstrations:

Demonstration 1

Country uses simple watermark
  1.  
  2. • This is a normal type="submit" button.
  3. • Check the QueryString after clicking to verify that a watermark value is never submitted.

Demonstration 2

Several watermarks created with one statement + different class name
  1. (maxlength=5, but watermark is longer)
  2. • This Submit button issues a call to the form (DOM object) submit() function (programmatic submit).
  3. • Check the QueryString after clicking to verify that a watermark value is never submitted.

Demonstration 3

Shows how watermark can be changed dynamically
  1. • This Submit button issues a call to the jQuery submit() trigger (programmatic submit).
  2. • Check the QueryString after clicking to verify that a watermark value is never submitted.
  3. • Uses the useNative: false option so that a class name can be applied.

Demonstration 4

Multi-line watermark in a TEXTAREA tag
  1. • This is a normal type="submit" button.
  2. • Check the QueryString after clicking to verify that a watermark value is never submitted.

Demonstration 5

Watermark in a password input element
  1. Do not enter any real passwords here!  Use something like "test".
  2. • It is not safe to set a watermarked password programmatically, so it's best to avoid.
  3. • This is a normal type="submit" button.
  4. • Check the QueryString after clicking to verify that a watermark value is never submitted.

Demonstration 6

Support for WebKit search element (type="search")
  1. • This example is for WebKit browsers and any other browser that supports <input type="search" ... />.
  2. • The first two input elements (marked with *) use the native watermark capability (if available).
  3. • The 3rd and 4th input elements use the plugin [non-native] watermark functionality.
  4. • WebKit native watermark support is buggy for drag-and-drop into and between Search fields (try it).
  5. • Current recommendation is to set useNative: false for elements with type="search".

Demonstration 7

.val() gets/sets underlying element value
  1.  
  2. • This demonstration uses jQuery's .val() to retrieve all element values.
  3. • After clicking Show Values, when you see <empty> displayed, it is correctly ignoring a watermark value.
  4. • Click Set Values to use .val() to set some elements to a value and others to a blank string. Watermarks/classes should be set.
  5. • Zip/Postcode and Country are configured with useNative: false so both native and non-native watermarks can be tested.