Placeholder.js - Documentation

Placeholder.js 1.1 is here !
What changed New wait attribute that let placeholder stay until text is typed, clear values of text fields when empty, etc... (see below)

DESCRIPTION

Placeholder.js simulates the placeholder effect available in Safari and extends it to all browsers. It automatically apply this to all the input text fields and textareas. It comes in 4 different versions : a normal version, a minified version, a jQuery version and a minified jQuery version.

DOWNLOAD

Download the latest version of Placeholder.js below :

Download 1.1.1

USAGE

The use of Placeholder.js is really simple. First, insert the following JS line in the page of your form :

Placeholder.init();

Then set the placeholder attribute in your input text or textarea :

<input type="text" name="username" placeholder="Your username" />
<textarea name="description" placeholder="Your description"></textarea>

EXTENDED USAGE

You can also change the text colors of your input text fields or textareas. Just pass the two available arguments : normal and placeholder. The first argument sets the color or the text when typed and the second one the placeholder color. These are the default values by the way.

Placeholder.init({
    normal : "#000000",
    placeholder : "#C0C0C0"
});

Placeholder.js 1.1 brings the wait attribute. This attribute makes the placeholder text stay until some text is typed.

Placeholder.init({
    wait: true
});

With 1.1, you get two more attributes classFocus and classBlur that define the CSS classes to use for both states: active and inactive. It's like normal and placeholder color attributes but for classes.
Note that, if both classes and colors attributes are set, classFocus and classBlur will be used in priority.

The following code will use the CSS class "normal" for the normal state and the CSS class "placeholder" for the placeholder state.

Placeholder.init({
    classFocus: "normal",
    classBlur:  "placeholder",
});

CHANGE LOG

1.1.1

Removed two trailing commas that prevented it from working on IE7 (thanks Clinton Green).

1.1

Two new attributes classFocus and classBlur for CSS classes use for both states instead of just text color
All text fields values are cleared at form submit when no text was typed
New wait attribute, placeholder displayed until text is typed

1.0

Normal and placeholder colors supported
Initial release

DEMO

Placeholder.init({
    wait: true,
    classFocus: "normal",
    classBlur:  "placeholder",
});