jQuery.placeHoldize is a jQuery plug-in which simulate the HTML5 "placeholder" attribute for every browser which does not support it. It also simulate it for "textarea"s as the WebKit only support it on "input"s. Additionnaly, the plug-in will take care of emptying the "placeholdized" elements before the form they're in (if any) is actually submitted. This to fully mimics the native behaviour of the attribute.
If you already know it, you can safely skip this section.
Quoted from Google Doctype:
The input placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry.
A hint could be a sample value or a brief description of the expected format.The input placeholder attribute can be any string, but must not contain carriage returns or line breaks.
The placeholder attribute can be used on the following elements: input, textarea
###Further reading###
###1. Include the necessary JavaScript files###
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/placeHoldize/jquery.placeholdize-0.2.0.min.js"></script>
###2. Add the "placeholder" attribute to your form elements###
<input type="text" name="name" value="" id="name" placeholder="Enter your name…" />
<textarea name="msg" id="msg" placeholder="Enter a message…"></textarea>
###3. Fire the plug-in###
( function( $ )
{
// Select all inputs and textareas that have a "placeholder" attribute.
$(
function()
{
$( 'input[placeholder], textarea[placeholder]' ).placeHoldize();
}
);
} )( jQuery );
###4. Options###
If you want to "force" the plug-in to fire even in browsers that have native support for the "placeholder" attribute, just supply "true" to the plug-in method.
( function( $ )
{
// Select all elements that have a "placeholder" attribute.
$(
function()
{
$( '[placeholder]' ).placeHoldize( true );
}
);
} )( jQuery );
###5. That's it!###
Licensed under the MIT License.