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
  7.  
  8. • This is a normal type="submit" button.
  9. • 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
  5. (maxlength=5, but watermark is longer)
  8. • This Submit button issues a call to the form (DOM object) submit() function (programmatic submit).
  9. • Check the QueryString after clicking to verify that a watermark value is never submitted.

Demonstration 3

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

Demonstration 4

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

Demonstration 5

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

Demonstration 6

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

Demonstration 7

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