# jQuery Watermark Plugin

## v 3.1.4

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

Features:

- Watermark style is controlled by CSS classes
- Each input element can have its own independent watermark text and class/style
- Plugin automatically removes all watermarks prior to form submission
- Both watermark text and CSS class name can be changed dynamically
- Visual Studio Intellisense-compatible documentation included in source
- Comes with jQuery selector extension ":data(...)" (documented in source)
- Password input automatically switches back to obfuscated text when focused
- Minified version is very compact — under 4,400 bytes

Demonstrations:

### Demonstration 1

Country uses simple watermark

1. Name *
2. Address *
3. Town/City *
4. State/Province *
5. Zip/Postcode *
6. Country
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

1. Name
2. Address
3. Town/City
4. State/Province
5. Zip/Postcode (maxlength=5, but watermark is longer)
6. Country
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

1. Name *
2. Address *
3. Town/City *
4. State/Province *
5. Zip/Postcode *
6. Country Clear input to restart timer
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

1. Name *
2. Address *
3. Country
5. • This is a normal type="submit" button. We attempt to watermark the button, but it should have no effect.
6. • Check the QueryString after clicking to verify that a watermark value is never submitted.

### Demonstration 5

Watermark in a password input element

1. Username *
2. Password *
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")

1. Search *
2. Search w/ History *
3. Search
4. Search w/ History
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

1. Name
2. Address
3. Town/City
4. State/Province
5. Zip/Postcode
6. Country
7. Phone
9. • This demonstration uses jQuery's .val() to retrieve all element values.
10. • After clicking Show Values, when you see <empty> displayed, it is correctly ignoring a watermark value.
11. • Click Set Values to use .val() to set some elements to a value and others to a blank string. Watermarks/classes should be set.
12. • The Clear Values button uses .val() to set all the elements to an empty string ("").
13. • Zip/Postcode and Country are configured with useNative: false so both native and non-native watermarks can be tested.
14. • Phone is a plain text element (no watermark) to ensure that non-watermarked .val() calls continue to work fine.

Watermark plugin for jQuery

Copyright © 2009-2011 Todd Northrop

Visit Speednet Group at www.speednet.biz

# Some of our projects:

- IF plugin for jQuery
- Watermark plugin for jQuery
- TopZIndex plugin for jQuery
- Unwrap plugin for jQuery
- Auto-Save plugin for TinyMCE
- Lottery Results Gagdet for Windows 7 & Windows Vista