jQuery Watermark Plugin

v 3.0.6

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".