jquery-placeholdize

0.3.0 • Public • Published

jQuery.placeHoldize

Introduction

jQuery.placeHoldize is a jQuery plug-in which simulates the HTML5 "placeholder" attribute for browsers which do not support it. 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.

But what does the "placeholder" 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###

Usage

1. Include the necessary JavaScript files###

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/placeHoldize/jquery.placeholdize-0.2.4.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" as the first argument of the method.

( function( $ )
{
    // Select all elements that have a "placeholder" attribute.
    $(
        function()
        {
            $( '[placeholder]' ).placeHoldize( true );
        } 
    );

} )( jQuery );

5. Styles###

The plugin will also apply three different classes to the elements so you can style them in their different states:

placeholdized       : Applied to any element that is targeted by the plugin.
placeholder-visible : Applied when the placeholder is visible, which means the input has no focus nor text typed in.
placeholder-hidden  : Applied when the placeholder is hidden, ie. after a focus on the input, or when someone has typed some text in.

6. That's it!###

License

Licensed under the MIT License.

Readme

Keywords

none

Package Sidebar

Install

npm i jquery-placeholdize

Weekly Downloads

0

Version

0.3.0

License

MIT

Last publish

Collaborators

  • dkastner