Allows you to set placeholder text for form fields
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
src
MIT-LICENSE.txt
README.rdoc

README.rdoc

jquery-placeholder-plugin

Placeholder plugin for jquery using HTML5 data attributes

Following versions of jQuery are supported:

  • 1.4

  • 1.4.1

  • 1.4.2

  • 1.4.3

  • 1.6.2

Other version have not been tested but it is assumed to worked from 1.4.0 onwards

Installation

Download jQuery from docs.jquery.com/Downloading_jQuery. Then download src/jquery-placeholder.js

Usage

  1. Have a text field like below:

<input type="text" name="q" data-placeholder="Product or Service" class="search">
  1. Call the 'placeholder' method on a class you define. In the above example we will use the class 'search'

$('.search').placeholder();

This will add the text in the data attribute 'data-placeholder' as the value or the form field. When the placeholder text is active, the field will also gain a class called placeholder-input which can be used to style the text.

Options

attribute

Allows you to change the HTML5 data attribute name.

$('.search').placeholder({attribute:'default'});

This will change the plugin to look for the default text in the data attribute called 'data-default'

color

Allows you to change the color of the placeholder.

$('.search').placeholder( { color:'#b9b9b9' });

This will change the colour of the placeholder text. When focused, the input color will revert to what was originally defined

Note: If you styled the colour of the entered text inline with the HTML, this will get cleared. But you really shouldn't be styling there anyway.

Todo

  • Allow changes to the active placeholder class that gets inserted.